am 2a91ecb1: Doc change: More updates to the design guidelines.

* commit '2a91ecb12982799001278752fc56464f9ececc60':
  Doc change: More updates to the design guidelines.

docs/html/design/building-blocks/buttons.jd

@@ -9,39 +9,83 @@ page.tags="button","input"
   </div>
 </a>
 
-<p>A button consists of text and/or an image that clearly communicates what action will occur when the
-user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless
-buttons</em>. Both can contain text labels and/or images.</p>
+<p>A button consists of text and/or an image that clearly communicates what action
+  will occur when the user touches it. A button can have an image, text, or both.
+</p>
 
-<img src="{@docRoot}design/media/buttons_basic.png">
-
-<h2 id="basic">Basic Buttons</h2>
-
-<p>Basic buttons are traditional buttons with borders and background. Android supports two styles for
-basic buttons: default and small. Default buttons have slightly larger font size and are optimized
-for display outside of form content. Small buttons are intended for display alongside other content.
-They have a smaller font and smaller minimum height. Use small buttons in forms where they need to
-align with other UI elements.</p>
-
-<img src="{@docRoot}design/media/buttons_default_small.png">
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-    <div class="figure-caption">
-      Default buttons in Holo Dark &amp; Light.
-    </div>
+<div class="layout-content-row" style="margin-top:22px">
+  <div class="layout-content-col span-3">
+    <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;">
   </div>
-  <div class="layout-content-col span-6">
-    <div class="figure-caption">
-      Small buttons in Holo Dark &amp; Light.
-    </div>
+  <div class="layout-content-col span-3">
+    <img src="{@docRoot}design/media/buttons_text.png"  style="height:94px;">
+  </div>
+  <div class="layout-content-col span-7">
+    <img src="{@docRoot}design/media/buttons_image_and_text.png"  style="height:94px;">
   </div>
 </div>
 
-<h2 id="borderless">Borderless Buttons</h2>
+<div class="layout-content-row" style="margin-top:0;">
+  <div class="layout-content-col span-3">
+      <p>An image alone works best when the action can be represented by a symbol that's well understood.</p>
+  </div>
+  <div class="layout-content-col span-3">
+      <p>Text alone is most appropriate for actions that would be difficult to
+      represent visually, or are critical to convey in words to avoid any ambiguity.</p>
+  </div>
+  <div class="layout-content-col span-7">
+    <p>
+      Both an icon and text is most appropriate when they complement each other:
+      each carrying its own bit of information, but together making a larger whole.
+    </p>
 
-<p>Borderless buttons resemble basic buttons except that they have no borders or background. You can
-use borderless buttons with both icons and text. Borderless buttons are visually more lightweight
-than basic buttons and integrate nicely with other content.</p>
+    <p>
+      For example, in a birthday reminder card in Google Now, the button's text
+      describes the action while its image indicates that the action will be done
+      in Google+.
+    </p>
+  </div>
+</div>
 
-<img src="{@docRoot}design/media/buttons_borderless.png">
+<h3>What about button backgrounds?</h3>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <p>For <strong>image-only</strong> buttons, a background isn't necessary because
+    users are accustomed to interacting with objects.</p>
+
+    <div class="layout-content-row" style="margin-left:72px">
+      <div class="layout-content-col span-2">
+        <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div>
+        <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;">
+      </div>
+      <div class="layout-content-col span-2" style="width:29px;margin-left:10px;">
+        <div class="do-dont-label good"><strong>Do</strong></div>
+        <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;">
+      </div>
+    </div>
+  </div>
+
+<div class="layout-content-col span-7">
+<p>
+  For buttons <strong>with text</strong>, a background is also usually
+  unnecessary. To invite users to touch, phrase it as a clear action (e.g.
+  "Start", "Sign in") and use different color and formatting than the screen's
+  usual body text.
+</p>
+
+<p>
+  Use buttons with backgrounds sparingly. Because they have a heavy appearance,
+  they work best when there's only one or two of them on the screen. They're
+  most appropriate for:
+</p>
+
+<ul>
+  <li>A call to action you really want users to pursue (e.g. "Sign up")</li>
+  <li>A key decision point (e.g. "Accept" / "Decline")</li>
+  <li>When the user is about to commit a significant action (e.g. "Erase
+  everything", "Buy now")</li>
+</ul>
+</div>
+</div>
 

docs/html/design/downloads/index.jd

@@ -1,4 +1,5 @@
 page.title=Downloads
+page tags="Icons", "stencils", "color swatches"
 @jd:body
 
 <div class="layout-content-row">
@@ -15,7 +16,7 @@ page.title=Downloads
 
 <p>
   <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'All Design Assets']);"
-    href="{@docRoot}downloads/design/Android_Design_Downloads_20130814.zip">Download All</a>
+    href="{@docRoot}downloads/design/Android_Design_Downloads_20131106.zip">Download All</a>
 </p>
 
   </div>
@@ -26,8 +27,8 @@ page.title=Downloads
 <div class="layout-content-row">
   <div class="layout-content-col span-5">
 
-<p>Drag and drop your way to beautifully designed Ice Cream Sandwich apps. The stencils feature the
-rich typography, colors, interactive controls, and icons found throughout Android 4.0, along with
+<p>Drag and drop your way to beautifully designed Android apps. The stencils feature the
+rich typography, colors, interactive controls, and icons found throughout Android, along with
 phone and tablet outlines to frame your creations. Source files for icons and controls are also
 available.</p>
 
@@ -40,14 +41,14 @@ available.</p>
   <div class="layout-content-col span-4">
 
 <p>
-  <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Fireworks Stencil']);"
+  <!--<a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Fireworks Stencil']);"
     href="{@docRoot}downloads/design/Android_Design_Fireworks_Stencil_20120814.png">Adobe&reg; Fireworks&reg; PNG Stencil</a>
   <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Illustrator Stencil']);"
     href="{@docRoot}downloads/design/Android_Design_Illustrator_Vectors_20120814.ai">Adobe&reg; Illustrator&reg; Stencil</a>
   <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'OmniGraffle Stencil']);"
-    href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni&reg; OmniGraffle&reg; Stencil</a>
+    href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni&reg; OmniGraffle&reg; Stencil</a>-->
   <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Photoshop Sources']);"
-    href="{@docRoot}downloads/design/Android_Design_Holo_Widgets_20120814.zip">Adobe&reg; Photoshop&reg; Sources</a>
+    href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe&reg; Photoshop&reg; Stencils and Sources</a>
 </p>
 
   </div>
@@ -74,7 +75,7 @@ modify to match your theme, plus source files.</p>
 
 <p>
   <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons']);"
-    href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Action Bar Icon Pack</a>
+    href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Action Bar Icon Pack</a>
 </p>
 
   </div>
@@ -114,7 +115,7 @@ requirements of UI and high-resolution screens.</p>
   <div class="layout-content-col span-5">
 
 <h4>Color</h4>
-<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
+<p>In Android's color palette, each color has a corresponding darker
 shade that can be used as a complement when needed.</p>
 <p><a href="{@docRoot}design/style/color.html">More on Color</a></p>
 

docs/html/design/patterns/actionbar.jd

@@ -182,7 +182,7 @@ files for further customization.
 <p>
 
 <a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons (@actionbar page)']);"
-   href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Download the Action Bar Icon Pack</a>
+   href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a>
 
 </p>
 

docs/html/design/patterns/buttons.jd

@@ -0,0 +1,151 @@
+page.title=Buttons
+page.tags="buttons"
+@jd:body
+
+<p>
+  Some content is best experienced full screen, like videos, games, image
+  galleries, books, and slides in a presentation. You can engage users more
+  deeply with content in full screen by minimizing visual distraction from app
+  controls and protecting users from escaping the app accidentally.
+</p>
+
+<div style="margin:auto;padding:auto;text-align:center;">
+    <img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;">
+</div>
+<p>
+  In version 4.4, Android offers two approaches for making your app go full
+  screen: Lean Back and Immersive. In both approaches, all persistent system
+  bars are hidden. The difference between them is how the user brings the bars
+  back into view.
+</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <h4>Lean Back</h4>
+    <p>Touch the screen anywhere to bring back system bars. </p>
+    <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;">
+  </div>
+  <div class="layout-content-col span-6">
+    <h4>Immersive</h4>
+    <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p>
+    <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right">
+    <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px">
+  </div>
+</div>
+
+<h2 id="leanback">
+  Lean Back
+</h2>
+
+<p>
+  The Lean Back approach is for full-screen experiences in which users won't be
+  interacting heavily with the screen while consuming content, like while
+  watching a video.
+</p>
+
+<p>
+  In this type of experience, users are leaning back and watching the screen.
+  Then, when they need to bring back the bars, they simply touch anywhere. This
+  gesture is easy and intuitive.
+</p>
+
+    <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;">
+
+<h2 id="immersive">
+  Immersive
+</h2>
+
+<p>
+  The Immersive approach is mainly intended for apps in which the user will be
+  heavily interacting with the full screen as part of the primary experience.
+  Examples are games, viewing images in a gallery, or reading paginated
+  content, like a book or slides in a presentation.
+</p>
+
+<p>
+  In this type of experience, when users need to bring back the system bars,
+  they swipe from any edge where a system bar is hidden. By requiring this more
+  deliberate gesture, the user's deep engagement with your app won't be
+  interrupted by accidental touches and swipes.
+</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right">
+    <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px">
+  </div>
+</div>
+
+<p>
+  The user learns about the gesture to bring back the system bars through a
+  message that appears the first time the app goes full screen.
+</p>
+
+<p>
+  If your app has its own controls that aren't needed when a user is immersed
+  in content, make them disappear and reappear in sync with the system bars.
+  This rule also applies to any app-specific gestures you might have for hiding
+  and showing app controls. For example, if touching anywhere on the screen
+  toggles the appearance of an action bar or a palette, then it must also
+  toggle the appearance of system bars.
+</p>
+
+<p>
+  You might be tempted to use this approach just to maximize screen real
+  estate. But be mindful of how often users jump in and out of apps to check
+  notifications, do impromptu searches, and more. This approach will cause
+  users to lose easy access to system navigation, so a little extra space
+  should not be the only benefit they're getting in return.
+</p>
+
+<h2 id="variation_using_edges">
+  Variation: Swiping from edges with bars also affects the app
+</h2>
+
+<p>
+  In the Immersive approach, any time a user swipes from an edge with a system
+  bar, the Android framework takes care of revealing the system bars. Your app
+  won't even be aware that this gesture occurred.
+</p>
+
+<p>
+  But in some apps, the user might occasionally need to swipe from the edge as
+  <strong>part of the primary app experience</strong>. Examples are games and
+  drawing applications.
+</p>
+
+<p>
+  For apps with this requirement, you can use a variation on the Immersive
+  approach: when a user swipes from an edge with a system bar, system bars are
+  shown and the gesture is passed to the app so the app can respond to the
+  gesture.
+</p>
+
+<p>
+  For example, in a drawing app that uses this approach, if a user wants to
+  draw a line that begins at the very edge of the screen, swiping from the edge
+  would reveal the system bars and also start drawing a line that begins at the
+  very edge.
+</p>
+
+<p>
+  In this approach, to minimize disruption while a user is deeply engaged in
+  the app, the system bars are semi-transparent. The bars automatically
+  disappear after a few seconds of no interaction or as soon as the user
+  touches or gestures anywhere outside the system bars.
+</p>
+
+<h2 id="lightsout">What About Lights Out Mode?</h2>
+
+<p>
+  Before Android 4.4, the design guideline was to use Lights Out mode, a mode
+  in which the Action Bar and Status Bar fades away and becomes unavailable
+  after a few seconds of inactivity. The Navigation Bar is still available and
+  responds to touches but appears dimmed.
+</p>
+
+<p>
+  Replace previous implementations of Lights Out mode with the Lean Back or
+  Immersive approaches. Continue to use Lights Out mode for implementations of
+  your app targeted for earlier releases.
+</p>

docs/html/design/patterns/fullscreen.jd

@@ -9,8 +9,9 @@ page.tags="full screen","immersive", "leanback"
   controls and protecting users from escaping the app accidentally.
 </p>
 
+<div style="margin:auto;padding:auto;text-align:center;">
     <img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;">
-
+</div>
 <p>
   In version 4.4, Android offers two approaches for making your app go full
   screen: Lean Back and Immersive. In both approaches, all persistent system

docs/html/design/patterns/gestures.jd

@@ -65,8 +65,9 @@ following table shows the core gesture set that is supported in Android.</p>
   <div class="layout-content-col span-4">
     <img src="{@docRoot}design/media/gesture_doubletouch.png">
     <h4>Double touch </h4>
-    <p>Scales up the smallest targetable view, if available, or scales a standard amount
-      around the gesture. Also used as a secondary gesture for text selection.</p>
+    <p> Scales up a standard amount around the target with each repeated gesture until reaching
+    maximum scale. For nested views, scales up the smallest targetable view, or returns it to
+    its original scale. Also used as a secondary gesture for text selection.</p>
     <ul>
       <li class="no-bullet with-icon action">
         <h4>Action</h4>

docs/html/design/style/branding.jd

@@ -49,16 +49,16 @@ and app name in the action bar.</p>
 <div class="vspace size-1">&nbsp;</div>
 
 <div class="layout-content-row">
-  <div class="layout-content-col span-6">
-        <img src="{@docRoot}design/media/yourbranding_icon.png" style="width:60px;float:left;padding-right:1em;">
-    <div class="figure-caption" style="widdth:220px;margin-left:20px;">
-    The HowzAbout app uses a launcher icon that is a shortened version of its full logo.
+  <div class="layout-content-col span-6" style="padding-top:24px;">
+        <img src="{@docRoot}design/media/branding_launcher_icon.png" style="width:60px;float:left;padding-right:1em;">
+    <div class="figure-caption" style="width:290px;margin-left:20px;">
+    Google+ reinforces its brand by carrying its launcher icon through to the action bar.
     </div>
-
+        <img src="{@docRoot}design/media/branding_logo_icon_action_bar.png" style="width:320px;float:left;padding-right:1em;">
   </div>
   <div class="layout-content-col span-6">
-    <img src="{@docRoot}design/media/yourbranding_app.png" style="width:94%">
-    <div class="figure-caption">
+    <img src="{@docRoot}design/media/yourbranding_app.png" style="width:320px;">
+    <div class="figure-caption" style="width:320px;">
       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>
@@ -77,7 +77,7 @@ and app name in the action bar.</p>
   </div>
 
   <div class="layout-content-col span-6">
-    <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;"">
+    <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;">
     </div>
   </div>
 </div>
@@ -100,9 +100,9 @@ and app name in the action bar.</p>
 
     <div style="margin-bottom:1em;">
       <span class="do-dont-label bad" style="margin-left:12px">Don't</span>
-      <span style="margin-left: 44px;"  class="do-dont-label good"><strong>Do</strong></span>
+      <span style="margin-left: 64px;"  class="do-dont-label good"><strong>Do</strong></span>
     </div>
-      <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:200px;">
+      <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:180px;">
   </div>
 </div>
 

docs/html/design/style/iconography.jd

@@ -139,7 +139,7 @@ files for further customization.
 </p>
 <p>
 <a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons (@iconography page)']);"
-   href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Download the Action Bar Icon Pack</a>
+   href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a>
 </p>
 
 <div class="layout-content-row">

docs/html/design/style/touch-feedback.jd

@@ -7,8 +7,6 @@ page.tags="input","button"
 
 <p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors
 of gestures, and indicate what actions are enabled and disabled.</p>
-<p>Whenever a user touches an actionable area in your app, provide a subtle visual response.
-This lets the user know which object was touched and that your app is "listening".</p>
 
 <p><strong>Be responsive to touches in a gentle way</strong>. Whenever a user touches an
 actionable area in your app, let them know the app is "listening" by providing a visual
@@ -22,27 +20,16 @@ of encouragement</a> are more pleasant than jolts.</li>
 easier because the default touch feedback works with whatever hue you choose.</li>
 </ul>
 
-  </div>
-
-  <div class="layout-content-col span-6" style="float:right;">
-
-   <!-- <div class="framed-nexus5-port-span-5">
-      <video class="play-on-hover" autoplay>
-        <source src="{@docRoot}design/media/calendar.mp4" type="video/mp4">
-        <source src="{@docRoot}design/media/calendar.webm" type="video/webm">
-        <source src="{@docRoot}design/media/calendar.ogv" type="video/ogg">
-      </video>
-    </div>
-    <div class="figure-caption" style="margin-top:0">
-      <div class="video-instructions">&nbsp;</div>
-    </div>
-  </div> -->
-
-
-  <div class="layout-content-col span-6">
-
-    <img src="{@docRoot}design/media/touch_feedback_reaction_response.png">
+</div>
 
+<div class="layout-content-col span-6" style="float:right;">
+  <video poster="{@docRoot}design/media/touch_feedback_thumb.png" class="play-on-hover" width="270" autoplay style="border:1px solid #ddd;">
+    <source src="{@docRoot}design/media/touch_feedback.mp4" type="video/mp4">
+    <source src="{@docRoot}design/media/touch_feedback.webm" type="video/webm">
+    <source src="{@docRoot}design/media/touch_feedback.ogv" type="video/ogg">
+  </video>
+  <div class="figure-caption">
+    <div style="color:#a3a3a3;margin-left:130px;"><em>Click image to replay...</em></div>
   </div>
 </div>
 

docs/html/index.jd

@@ -14,78 +14,62 @@ page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3
         <a href="" class="slideshow-next">Next</a>
         <div class="frame">
             <ul>
+                <!-- set explicit widths as needed to prevent overflow issues -->
 
                 <li class="item carousel-home">
-                    <div class="content-left col-7">
-                        <a href="/about/versions/kitkat.html"><img src="/images/home/kk-hero.jpg" style="width:242px;padding-top:72px;"></a>
-                    </div>
-                    <div class="content-right col-6">
+                  <div class="content-left col-7" style="width:400px;">
+                    <a href="{@docRoot}about/versions/kitkat.html">
+                      <img src="{@docRoot}images/home/kk-hero.jpg" width="242" style="padding-top:72px;">
+                    </a>
+                  </div>
+                  <div class="content-right col-4" style="width:340px;">
                     <h1>Android 4.4 KitKat!</h1>
                     <p>A new version of Android is here, with great new features, APIs, and tools for developers.</p>
                     <p>Android 4.4 is built to run on more devices than ever before, and gives you more ways to showcase your content and create beautiful, useful, and innovative apps.</p>
                     <p>Learn about what's new in the Platform Highlights and see the API Overview for details.</p>
-                    <p><a href="/about/versions/kitkat.html" class="button">Check out the highlights</a></p>
-                    </div>
+                    <p><a href="{@docRoot}about/versions/kitkat.html" class="button">Check out the highlights</a></p>
+                  </div>
                 </li>
 
                 <li class="item carousel-home">
-                    <div class="content-left col-11" style="padding-top:65px;">
-                      <a href="https://www.youtube.com/watch?v=sONcojECWXs&list=PLWz5rJ2EKKc-2quE-o0enpILZF3nBZg_K&index=1">
-                                          <img src="/images/title-devbytes-kk.jpg" style="margin-top:22px;width:600px;">
-                        </a>
-                      </div>
-
-                    <div class="content-right col-4">
+                  <div class="content-left col-11" style="padding-top:65px;">
+                    <a href="https://www.youtube.com/watch?v=sONcojECWXs&list=PLWz5rJ2EKKc-2quE-o0enpILZF3nBZg_K&index=1">
+                      <img src="{@docRoot}images/title-devbytes-kk.jpg" style="margin-top:0px;width:600px;">
+                    </a>
+                  </div>
+                  <div class="content-right col-4">
                     <h1 style="white-space:nowrap;line-height:1.2em;">DevBytes: <br />Android 4.4</h1>
                     <p>Join the DevBytes team for a look at what's new in Android 4.4 KitKat&nbsp;&mdash; new ways to make your apps beautiful, printing, storage access framework, and more.</p>
                     <p><a href="https://www.youtube.com/watch?v=sONcojECWXs&list=PLWz5rJ2EKKc-2quE-o0enpILZF3nBZg_K&index=1" class="button">Watch the video </a></p>
-                    </div>
+                  </div>
                 </li>
 
-
                 <li class="item carousel-home">
-                    <div class="content-left col-10"><a href="/design/patterns/new.html">
-                        <img src="/design/media/design_elements_landing.png" style="margin-top:30px">
-                        </a>
-                    </div>
-                    <div class="content-right col-5">
+                  <div class="content-left col-19" style="width:580px;">
+                    <a href="{@docRoot}design/patterns/new.html">
+                      <img src="{@docRoot}design/media/design_elements_landing.png" style="margin-top:30px">
+                    </a>
+                  </div>
+                  <div class="content-right col-4" style="width:280px;">
                     <h1>Design for Android KitKat</h1>
                     <p>Android KitKat brings a refreshed UI with updated styles, patterns, and gestures to use in your apps. </p>
                     <p>We've updated the Android Design guidelines and added new pages on branding, fullscreen, and more. </p>
-                    <p><a href="/design/patterns/new.html" class="button">See what's new</a></p>
-                    </div>
+                    <p><a href="{@docRoot}design/patterns/new.html" class="button">See what's new</a></p>
+                  </div>
                 </li>
 
-                <!--<li class="item carousel-home">
-                    <div class="content-left col-11" style="padding-top:65px;">
-                      <a href="http://www.youtube.com/watch?v=6QHkv-bSlds&list=PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF&index=1">
-                                          <img src="/images/title-adia-kk.png" style="margin-top:22px;width:600px;">
-                        </a>
-                      </div>
-
-                    <div class="content-right col-4">
+                <li class="item carousel-home">
+                  <div class="content-left col-11" style="padding-top:65px;">
+                    <a href="http://www.youtube.com/watch?v=6QHkv-bSlds&list=PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF&index=1">
+                      <img src="{@docRoot}images/title-adia-kk.png" style="margin-top:0px;width:600px;">
+                    </a>
+                  </div>
+                  <div class="content-right col-4">
                     <h1 style="white-space:nowrap;line-height:1.2em;">ADIA: <br />Android 4.4</h1>
                     </p>Join the Android Design in Action team for a walkthrough of new developer features, UX changes, and updates to design guidelines in Android 4.4.</p>
                     <p><a href="http://www.youtube.com/watch?v=6QHkv-bSlds&list=PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF&index=1" class="button">Watch the video </a></p>
-                    </div>
-                </li> -->
-               <!-- <li class="item carousel-home">
-                    <div class="content-left col-11" style="padding-top:10px;">
-                        <a href="/channels/io2013.html">
-                          <img src="/images/home/io-videos-2013.png" style="margin:60px 0 0;
-                          box-shadow: 3px 10px 18px 1px #999;">
-                        </a>
-                    </div>
-                    <div class="content-right col-4">
-                    <h1>Hands-on with New KitKat Features</h1>
-                    <p>If you weren't able to attend Google I/O in person or couldn't make it
-                    to all the talks, you can catch up on the action
-                    with all the recordings, brought to you by
-                    <a href="http://developers.google.com/live">Google Developers Live</a>.</p>
-                    <p><a href="/channels/io2013.html" class="button"
-                    >See the Android talks</a></p>
-                    </div>
-                </li> -->
+                  </div>
+                </li>
            </ul>
         </div>
     </div>