Doc change: Design guidelines update.

Change-Id: Id37c0bfc1fe7e2c7156aab0ec85df123534c8c96
Bug-id: 11252971 11256762 11256765 11257156 11257769 11276296 11293924 11324992
(cherry picked from commit 0b734038a6ff6c19785ae3979c3085910b9208a0)

10 files changed, 388 insertions, 160 deletions

diff --git a/docs/html/design/patterns/accessibility.jd b/docs/html/design/patterns/accessibility.jd
index 16a39d6..532900e 100644
--- a/docs/html/design/patterns/accessibility.jd
+++ b/docs/html/design/patterns/accessibility.jd
@@ -55,7 +55,6 @@ page.tags="accessibility","navigation","input"
           <em>when not starred:</em> add to favorties</li>
         <li class="value-7">action overflow button</li>
         <li class="value-8">text message</li>
-        <li class="value-9">video chat</li>
       </ol>
   </div>
 </div>
diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd
index 2c59149..939370c 100644
--- a/docs/html/design/patterns/actionbar.jd
+++ b/docs/html/design/patterns/actionbar.jd
@@ -93,9 +93,9 @@ rotation on different screen sizes.</p>
 content across multiple bars located below the main action bar or at the bottom of the screen.</p>
 
 <img src="{@docRoot}design/media/action_bar_pattern_rotation.png">
-<div class="figure-caption">
+<!-- <div class="figure-caption">
   Split action bar showing action buttons at the bottom of the screen in vertical orientation.
-</div>
+</div> -->
 
 <h2 id="considerations-split-action-bars">Layout Considerations for Split Action Bars</h2>
 
diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd
index 0dc20e2..1447d4e 100644
--- a/docs/html/design/patterns/app-structure.jd
+++ b/docs/html/design/patterns/app-structure.jd
@@ -1,4 +1,4 @@
-page.title=Application Structure
+page.title=App Structure
 page.tags="navigation","layout","tablet"
 @jd:body
 
@@ -61,30 +61,9 @@ layouts that are visually engaging and appropriate for the data type and screen
 
     <img src="{@docRoot}design/media/app_structure_market.png">
     <div class="figure-caption">
-      The Play Store app's start screen primarily allows navigation into the stores for Apps, Music, Books,
-      Movies, and Games. It is also enriched with tailored recommendations and promotions that
-      surface content of interest to the user. Search is readily available from the action bar.
-    </div>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Create an identity for your app</h4>
-<p>Creating an identity for your app goes beyond the action bar. Your app communicates its identity
-through its data, the way that data is arranged, and how people interact with it. Especially for
-media-rich applications, try to create unique layouts that showcase your data and go beyond the
-monotony of simple list views.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="{@docRoot}design/media/app_structure_music_lndscp.png">
-    <div class="figure-caption">
-      The 3D carousel celebrates cover art and establishes a unique identity for the Music app.
-      Defaulting to the Recent view keeps the focus on music the user has been listening to lately.
+      Play Music allows navigation among artists, albums, and playlists through rich content display.
+      It is also enriched with tailored recommendations and promotions that surface content of interest
+      to the user. Search is readily available from the action bar. 
     </div>
 
   </div>
@@ -112,9 +91,8 @@ important actions.</p>
 
     <img src="{@docRoot}design/media/app_structure_gmail.png">
     <div class="figure-caption">
-      Email is about productivity, so an efficient, easy-to-skim list with higher data density works
-      well. Navigation supports switching between accounts and recent labels. Icons for creating a
-      new message or searching are prominent in the split action bar at the bottom.
+      A calendar is about productivity, so an efficient, easy-to-skim view with higher data density works
+      well. Navigation supports switching views of day, week, month, and agenda views. 
     </div>
 
   </div>
@@ -185,7 +163,7 @@ important actions.</p>
   <div class="layout-content-col span-7">
     <img src="{@docRoot}design/media/app_structure_drawer.png">
     <div class="figure-caption">
-      Navigation drawer from the Shopper app.
+      Navigation drawer from the Keep app.
     </div>
   </div>
 </div>
@@ -230,7 +208,7 @@ in view at the same time.</p>
 
     <img src="{@docRoot}design/media/app_structure_fixedtabs.png">
     <div class="figure-caption">
-      YouTube uses fixed tabs to switch between different, relatively unrelated functional areas.
+      People uses fixed tabs to switch between different, relatively unrelated functional areas.
     </div>
 
 
@@ -290,21 +268,6 @@ design guide.</p>
   </div>
 </div>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-<h4>Lights-out mode</h4>
-<p>Immersive content like media and games is best experienced full screen without distractions. But that doesn't mean you can't also offer actions on the content like sharing, commenting, or searching. If the user hasn't interacted with any of the controls after a short period of time, automatically fade away the action bar and all system UI affordances so the user can lean back and enjoy the content. We call this lights-out mode. Later, if the user wants to take some action, they can touch anywhere on the screen to exit lights-out mode and bring back the controls.</p>
-
-  </div>
-  <div class="layout-content-col span-9">
-
-    <img src="{@docRoot}design/media/app_structure_book_detail_page_flip.png">
-    <div class="figure-caption">
-      Google Books' detail view replicates the immersive experience of reading an actual book through lights-out mode and a page-flip animation.
-    </div>
-  </div>
-</div>
 
 <h4>Make navigation between detail views efficient</h4>
 <p>If your users are likely to want to look at multiple items in sequence, allow them to navigate
diff --git a/docs/html/design/patterns/fullscreen.jd b/docs/html/design/patterns/fullscreen.jd
new file mode 100644
index 0000000..191ca40
--- /dev/null
+++ b/docs/html/design/patterns/fullscreen.jd
@@ -0,0 +1,150 @@
+page.title=Full Screen
+page.tags="full screen","immersive", "leanback"
+@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>
+
+    <img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;">
+
+<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>
\ No newline at end of file
diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd
index 127a1c8..837a6dd 100644
--- a/docs/html/design/patterns/gestures.jd
+++ b/docs/html/design/patterns/gestures.jd
@@ -5,112 +5,122 @@ page.tags="gesture","input","touch"
 <p>Gestures allow users to interact with your app by manipulating the screen objects you provide. The
 following table shows the core gesture set that is supported in Android.</p>
 
+<div class="vspace size-2">&nbsp;</div>
+
 <div class="layout-content-row">
-  <div class="layout-content-col span-4">
 
+  <div class="layout-content-col span-4">
     <img src="{@docRoot}design/media/gesture_touch.png">
-
-<h4>Touch</h4>
-<p>Triggers the default functionality for a given item.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>Press, lift</p></li>
-</ul>
-
+    <h4>Touch</h4>
+    <p>Triggers the default functionality for a given item.</p>
+    <ul>
+      <li class="no-bullet with-icon action">
+        <h4>Action</h4>
+        <p>Press, lift</p></li>
+    </ul>
   </div>
-  <div class="layout-content-col span-4">
 
+  <div class="layout-content-col span-4">
     <img src="{@docRoot}design/media/gesture_longtouch.png">
-
-<h4>Long press</h4>
-<p>Enters data selection mode. Allows you to select one or more items in a view and act upon
-  the data using a contextual action bar. Avoid using long press for showing contextual menus.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>Press, wait, lift</p></li>
-</ul>
-
+    <h4>Long press</h4>
+    <p>Enters data selection mode. Allows you to select one or more items in a view and act upon
+    the data using a contextual action bar. Avoid using long press for showing contextual menus.</p>
+    <ul>
+      <li class="no-bullet with-icon action">
+        <h4>Action</h4>
+        <p>Press, wait, lift</p></li>
+    </ul>
   </div>
-  <div class="layout-content-col span-4">
 
+  <div class="layout-content-col span-4">
     <img src="{@docRoot}design/media/gesture_swipe.png">
-
-<h4>Swipe</h4>
-<p>Scrolls overflowing content, or navigates between views in the same hierarchy.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>Press, move, lift</p></li>
-</ul>
-
+    <h4>Swipe or drag</h4>
+    <p>Scrolls overflowing content, or navigates between views in the same hierarchy. Swipes are
+    quick and affect the screen even after the finger is picked up. Drags are slower and more precise,
+    and the screen stops responding when the finger is picked up.</p>
+    <ul>
+      <li class="no-bullet with-icon action">
+        <h4>Action</h4>
+        <p>Press, move, lift</p></li>
+    </ul>
   </div>
+
 </div>
 
+<div class="vspace size-2">&nbsp;</div>
 
 <div class="layout-content-row">
-  <div class="layout-content-col span-4">
 
+  <div class="layout-content-col span-4">
     <img src="{@docRoot}design/media/gesture_drag.png">
-
-<h4>Drag</h4>
-<p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>Long press, move, lift</p></li>
-</ul>
-
+    <h4>Long press drag</h4>
+    <p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p>
+    <ul>
+      <li class="no-bullet with-icon action">
+        <h4>Action</h4>
+        <p>Long press, move, lift</p></li>
+    </ul>
   </div>
-  <div class="layout-content-col span-4">
 
+  <div class="layout-content-col span-4">
     <img src="{@docRoot}design/media/gesture_doubletouch.png">
-
-<h4>Double touch</h4>
-<p>Zooms into content. Also used as a secondary gesture for text selection.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>Two touches in quick succession</p></li>
-</ul>
-
+    <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>
+    <ul>
+      <li class="no-bullet with-icon action">
+        <h4>Action</h4>
+        <p>Two touches in quick succession</p>
+      </li>
+    </ul>
   </div>
-  <div class="layout-content-col span-4">
-
-    <img src="{@docRoot}design/media/gesture_pinchopen.png" style="margin-left:-4px">
-
-<h4>Pinch open</h4>
-<p>Zooms into content.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>2-finger press, move outwards, lift</p></li>
-</ul>
 
+  <div class="layout-content-col span-4">
+    <img src="{@docRoot}design/media/gesture_doubletouchdrag.png">
+    <h4>Double touch drag</h4>
+    <p>Scales content by pushing away or pulling closer, centered around gesture.</p>
+    <ul>
+      <li class="no-bullet with-icon action">
+        <h4>Action</h4>
+        <p>A single touch followed in quick succession by a drag up or down:</p>
+        <ul style="padding-left:1.5em;list-style-type:disc;">
+          <li>Dragging up decreases content scale</li>
+          <li>Dragging down increases content scale</li>
+          <li>Reversing drag direction reverses scaling.</li>
+        </ul>
+      </li>
+    </ul>
   </div>
+  
 </div>
 
 
+<div class="vspace size-2">&nbsp;</div>
+
 <div class="layout-content-row">
+
   <div class="layout-content-col span-4">
+    <img src="{@docRoot}design/media/gesture_pinchopen.png" style="margin-left:-4px">
+    <h4>Pinch open</h4>
+    <p>Zooms into content.</p>
+    <ul>
+      <li class="no-bullet with-icon action">
+        <h4>Action</h4>
+        <p>2-finger press, move outwards, lift</p></li>
+    </ul>
+  </div>
 
+  <div class="layout-content-col span-4">
     <img src="{@docRoot}design/media/gesture_pinchclose.png">
-
-<h4>Pinch close</h4>
-<p>Zooms out of content.</p>
-
-<ul>
-  <li class="no-bullet with-icon action">
-    <h4>Action</h4>
-    <p>2-finger press, move inwards, lift</p></li>
-</ul>
-
+    <h4>Pinch close</h4>
+    <p>Zooms out of content.</p>
+    <ul>
+      <li class="no-bullet with-icon action">
+        <h4>Action</h4>
+        <p>2-finger press, move inwards, lift</p>
+      </li>
+    </ul>
   </div>
+
 </div>
+
diff --git a/docs/html/design/patterns/help.jd b/docs/html/design/patterns/help.jd
index a32fb25..ad5742d 100644
--- a/docs/html/design/patterns/help.jd
+++ b/docs/html/design/patterns/help.jd
@@ -20,7 +20,7 @@ page.tags="settings","preferences"
 <p>The only reason for showing pure help content to new users unsolicited is:<br>
 <em>To teach high value functionality that's only available through a gesture.</em></p>
 
-<p>For example, we use help content to teach users how to place apps on their Home Screen. This functionality is:</p>
+<p>For example, we use help content to teach users how to place apps on their Home screen. This functionality is:</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-8">
     <ul>
diff --git a/docs/html/design/patterns/new.jd b/docs/html/design/patterns/new.jd
index 23e3e10..50cb950 100644
--- a/docs/html/design/patterns/new.jd
+++ b/docs/html/design/patterns/new.jd
@@ -1,7 +1,97 @@
 page.title=New in Android
+page.tags="KitKat", "Android 4.4"
 @jd:body
 
-<h2>Jelly Bean - Android 4.1</h2>
+
+<p>A quick look at the new patterns and styles you can use to build beautiful Android apps&hellip; 
+
+<h2 id="kitkat">Android 4.4 KitKat</h2>
+
+<img src="{@docRoot}design/media/branding_googlemusic.png" style="float:right;width:260px;padding-left:3em;margin-left: 28px;margin-right:15%;">
+
+<h3>
+  Your branding
+</h3>
+
+
+<p>
+  Consistency has its place in Android, but you also have the flexibility to
+  customize the look of your app to reinforce your brand.
+</p>
+
+<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>
+  Show your app's launcher icon and name in the action bar so that users can
+  see it in every screen of your app.
+</p>
+<p>
+  <a href="{@docRoot}design/style/branding.html">Your Branding</a> highlights 
+  these and other pointers on how to incorporate elements of your brand into your
+  app's visual language &mdash; highly encouraged!
+</p>
+
+<h3>
+  Touch feedback
+</h3>
+
+<p>
+  Before Android KitKat, Android's default touch feedback color was a vibrant
+  blue. Every touch resulted in a jolt of high-contrast color, in a shade that
+  might not have mixed well with your brand's color(s).
+</p>
+
+
+<p>
+  In Android KitKat and beyond, touch feedback is subtle: when something is
+  touched, by default its background color slightly darkens or lightens. This
+  provides two benefits: (1) <a href=
+  "/design/get-started/principles.html#sprinkle-encouragement">sprinkles
+  of encouragement</a> are more pleasant than jolts, and (2) incorporating your
+  branding is much easier because the default touch feedback works with
+  whatever hue you choose. Check the updated <a href=
+  "/design/style/touch-feedback.html">Touch Feedback</a> page for more
+  details.
+</p>
+<img src="{@docRoot}design/media/touch_feedback_reaction_response.png" style="padding-top:1em;">
+
+<h3>
+  Full screen 
+</h3>
+
+<p>
+  Android KitKat has improved support for letting your app use the entire
+  screen, with a few different approaches to meet the varying needs of apps and
+  content. The new <a href="{@docRoot}design/patterns/fullscreen.html">Full
+  Screen</a> page will guide you in setting the stage for deep user engagement.
+</p>
+
+<img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;">
+
+<h3>
+  Gestures 
+</h3>
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+<p>
+  The updated <a href="{@docRoot}design/patterns/gestures.html">Gestures</a>
+  page covers new and updated gestures introduced in Android KitKat:
+  <strong>double touch drag</strong> and <strong>double touch</strong>. These
+  gestures are used for changing the viewing size of content.
+</p>
+  </div>
+  <div class="layout-content-col span-7">
+    <img src="{@docRoot}design/media/gesture_doubletouch.png">
+      <img src="{@docRoot}design/media/gesture_doubletouchdrag.png">
+  </div>
+</div>
+
+
+<h2>Android 4.1 Jelly Bean</h2>
 
 <h4>Notifications</h4>
 <div class="layout-content-row">
@@ -14,7 +104,10 @@ page.title=New in Android
       <li>Notifications can be collapsed and expanded</li>
     </ul>
 
-    <p>The base notification layout has not changed, so app notifications designed for versions earlier than Jelly Bean still look and work the same. Check the updated <a href="{@docRoot}design/patterns/notifications.html">Notifications</a> page for more details.</p>
+    <p>The base notification layout has not changed, so app notifications designed for versions
+    earlier than Jelly Bean still look and work the same. Check the updated <a
+    href="{@docRoot}design/patterns/notifications.html">Notifications</a> page for
+    more details.</p>
   </div>
   <div class="layout-content-col span-6">
     <img src="{@docRoot}design/media/new_notifications.png">
@@ -26,14 +119,21 @@ page.title=New in Android
 <h4>Resizable Application Widgets</h4>
 <div class="layout-content-row">
   <div class="layout-content-col span-7">
-    <p>Widgets are an essential aspect of home screen customization, allowing "at-a-glance" views of an app's most important data and functionality right from the user's home screen. Android 4.1 introduces improved App Widgets that can <strong>automatically resize and load different content</strong> based upon a number of factors including:</p>
+    <p>Widgets are an essential aspect of home screen customization, allowing
+    "at-a-glance" views of an app's most important data and functionality right from
+    the user's home screen. Android 4.1 introduces improved App Widgets that can
+    <strong>automatically resize and load different content</strong> based upon a
+    number of factors including:</p>
     <ul>
       <li>Where the user drops them on the home screen</li>
       <li>The size to which the user expands them</li>
       <li>The amount of room available on the home screen</li>
     </ul>
 
-    <p>You can supply separate landscape and portrait layouts for your widgets, which the system inflates as appropriate when the screen orientation changes. The Application Widgets has useful details about widget types, limitations, and design considerations.</p>
+    <p>You can supply separate landscape and portrait layouts for your widgets, which
+    the system inflates as appropriate when the screen orientation changes. The <a
+    href="{@docRoot}design/patterns/widgets.html">Application Widgets</a> page has useful
+    details about widget types, limitations, and design considerations.</p>
   </div>
   <div class="layout-content-col span-6">
     <img src="{@docRoot}design/media/new_widgets.png">
@@ -45,8 +145,12 @@ page.title=New in Android
 <h4>Accessibility</h4>
 <div class="layout-content-row">
   <div class="layout-content-col span-11">
-    <p>One of Android's missions is to organize the world's information and make it universally accessible and useful. Our mission applies to all users-including people with disabilities such as visual impairment, color deficiency, hearing loss, and limited dexterity.</p>
-    <p>The new <a href="{@docRoot}design/patterns/accessibility.html">Accessibility</a> page provides details on how to design your app to be as accessible as possible by:</p>
+    <p>One of Android's missions is to organize the world's information and
+    make it universally accessible and useful. Our mission applies to all
+    users-including people with disabilities such as visual impairment, color
+    deficiency, hearing loss, and limited dexterity.</p>
+    <p>The new <a href="{@docRoot}design/patterns/accessibility.html">Accessibility</a>
+    page provides details on how to design your app to be as accessible as possible by:</p>
     <ul>
       <li>Making navigation intuitive</li>
       <li>Using recommended touch target sizes</li>
@@ -56,20 +160,28 @@ page.title=New in Android
       <li>Trying it out yourself</li>
     </ul>
 
-    <p>You can supply separate landscape and portrait layouts for your widgets, which the system inflates as appropriate when the screen orientation changes. The <a href="{@docRoot}design/patterns/widgets.html">Widgets</a> page has useful details about widget types, limitations, and design considerations.</p>
+    <p>You can supply separate landscape and portrait layouts for your
+    widgets, which the system inflates as appropriate when the screen
+    orientation changes. The
+    <a href="{@docRoot}design/patterns/widgets.html">Widgets</a> page has
+    useful details about widget types, limitations, and design considerations.</p>
   </div>
   <div class="layout-content-col span-2">
     <img src="{@docRoot}design/media/new_accessibility.png">
   </div>
 </div>
 
-<h2>Ice Cream Sandwich - Android 4.0</h2>
+<h2>Android 4.0 Ice Cream Sandwich</h2>
 
 <h4>Navigation bar</h4>
 <div class="layout-content-row">
   <div class="layout-content-col span-7">
-    <p>Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a
-    virtual navigation bar that houses the Back, Home and Recents buttons. Read the <a href="{@docRoot}design/patterns/compatibility.html">Compatibility</a> pattern to learn how the OS adapts to phones with hardware buttons and how pre-Android 3.0 apps that rely on menu keys are supported.</p>
+    <p>Android 4.0 removes the need for traditional hardware keys on
+    phones by replacing them with a virtual navigation bar that houses
+    the Back, Home and Recents buttons. Read the
+    <a href="{@docRoot}design/patterns/compatibility.html">Compatibility</a>
+    pattern to learn how the OS adapts to phones with hardware buttons and
+    how pre-Android 3.0 apps that rely on menu keys are supported.</p>
   </div>
   <div class="layout-content-col span-6">
     <img src="{@docRoot}design/media/whats_new_nav_bar.png">
@@ -81,7 +193,9 @@ page.title=New in Android
 <h4>Action bar</h4>
 <div class="layout-content-row">
   <div class="layout-content-col span-7">
-    <p>The action bar is the most important structural element of an Android app. It provides consistent navigation across the platform and allows your app to surface actions.</p>
+    <p>The action bar is the most important structural element of an Android
+    app. It provides consistent navigation across the platform and allows your
+    app to surface actions.</p>
   </div>
   <div class="layout-content-col span-6">
     <img src="{@docRoot}design/media/whats_new_action_bar.png">
@@ -93,7 +207,10 @@ page.title=New in Android
 <h4>Multi-pane layouts</h4>
 <div class="layout-content-row">
   <div class="layout-content-col span-7">
-    <p>Creating apps that scale well across different form factors and screen sizes is important in the Android world. Multi-pane layouts allow you to combine different activities that show separately on smaller devices into richer compound views for tablets.</p>
+    <p>Creating apps that scale well across different form factors and screen
+    sizes is important in the Android world. Multi-pane layouts allow you to
+    combine different activities that show separately on smaller devices into
+    richer compound views for tablets.</p>
   </div>
   <div class="layout-content-col span-6">
     <img src="{@docRoot}design/media/whats_new_multipanel.png">
@@ -106,7 +223,9 @@ page.title=New in Android
 
 <div class="layout-content-row">
   <div class="layout-content-col span-7">
-    <p>The long press gesture which was traditionally used to show contextual actions for objects is now used for data selection. When selecting data, contextual action bars allow you to surface actions.</p>
+    <p>The long press gesture which was traditionally used to show contextual
+    actions for objects is now used for data selection. When selecting data,
+    contextual action bars allow you to surface actions.</p>
   </div>
   <div class="layout-content-col span-6">
     <img src="{@docRoot}design/media/whats_new_multiselect.png">
diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd
index 018b7b9..80f1b0e 100644
--- a/docs/html/design/patterns/notifications.jd
+++ b/docs/html/design/patterns/notifications.jd
@@ -233,28 +233,15 @@ develop a widget that they can choose to place on their home screen.</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-6">
 
-<p>On tablets, the notification area is integrated with the system bar at the bottom of the screen. The notification drawer is opened by touching anywhere inside the notification area.</p>
+<p><h4>Ongoing notifications</h4>
+<p>Ongoing notifications keep users informed about an ongoing process in the background. For example, music players announce the currently playing track in the notification system and continue to do so until the user stops the playback. They can also be used to show the user feedback for longer tasks like downloading a file, or encoding a video. Ongoing notifications cannot be manually removed from the notification drawer.</p></p>
 
   </div>
   <div class="layout-content-col span-6">
 
-    <img src="{@docRoot}design/media/notifications_pattern_tablet.png">
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
     <img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png">
 
   </div>
-  <div class="layout-content-col span-6">
-
-<h4>Ongoing notifications</h4>
-<p>Ongoing notifications keep users informed about an ongoing process in the background. For example, music players announce the currently playing track in the notification system and continue to do so until the user stops the playback. They can also be used to show the user feedback for longer tasks like downloading a file, or encoding a video. Ongoing notifications cannot be manually removed from the notification drawer.</p>
-
-  </div>
 </div>
 
 <div class="layout-content-row">
diff --git a/docs/html/design/patterns/pure-android.jd b/docs/html/design/patterns/pure-android.jd
index 77813c0..a0f672e 100644
--- a/docs/html/design/patterns/pure-android.jd
+++ b/docs/html/design/patterns/pure-android.jd
@@ -32,7 +32,7 @@ conventions of a different platform.</p>
 
     <img src="{@docRoot}design/media/migrating_ui_elements.png">
     <div class="figure-caption">
-      Sampling of UI elements from Android, iOS and Windows Phone 7.
+      Sampling of UI elements from Android, iOS, and Windows Phone.
     </div>
 
   </div>
@@ -56,7 +56,7 @@ counterparts.</p>
 
     <img src="{@docRoot}design/media/migrating_icons.png">
     <div class="figure-caption">
-      Sampling of icons from Android, iOS and Windows Phone 7.
+      Sampling of icons from Android, iOS, and Windows Phone.
     </div>
 
   </div>
diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd
index 630a4b9..4c9fb88 100644
--- a/docs/html/design/patterns/swipe-views.jd
+++ b/docs/html/design/patterns/swipe-views.jd
@@ -32,12 +32,12 @@ using the swipe gesture to navigate to the next/previous detail view.</p>
 
 <img src="{@docRoot}design/media/swipe_views2.png">
 <div class="figure-caption">
-  Navigating between consecutive Email messages using the swipe gesture. If a view contains content that exceeds the width of the screen such as a wide Email message, make sure the user's initial swipes will scroll horizontally within the view. Once the end of the content is reached, an additional swipe should navigate to the next view. In addition, support the use of edge swipes to immediately navigate between views when content scrolls horizontally.
+  Navigating between consecutive email messages using the swipe gesture. If a view contains content that exceeds the width of the screen such as a wide email message, make sure the user's initial swipes will scroll horizontally within the view. Once the end of the content is reached, an additional swipe should navigate to the next view. In addition, support the use of edge swipes to immediately navigate between views when content scrolls horizontally.
 </div>
 
 <img src="{@docRoot}design/media/swipe_views3.png">
 <div class="figure-caption">
-  Scrolling within a wide Email message using the swipe gesture before navigating to the next message.
+  Scrolling within a wide email message using the swipe gesture before navigating to the next message.
 </div>
 
 <h2 id="between-tabs">Swiping Between Tabs</h2>
@@ -45,7 +45,7 @@ using the swipe gesture to navigate to the next/previous detail view.</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-5">
 
-    <div class="framed-galaxynexus-port-span-5">
+    <div class="framed-nexus5-port-span-5">
       <video class="play-on-hover" autoplay>
         <source src="{@docRoot}design/media/swipe_tabs.mp4" type="video/mp4">
         <source src="{@docRoot}design/media/swipe_tabs.webm" type="video/webm">