Doc change: Design guidelines update.

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

7 files changed, 350 insertions, 169 deletions

diff --git a/docs/html/design/style/branding.jd b/docs/html/design/style/branding.jd
new file mode 100644
index 0000000..9ef934d
--- /dev/null
+++ b/docs/html/design/style/branding.jd
@@ -0,0 +1,112 @@
+page.title=Your Branding
+page.tags="branding","logo"
+@jd:body
+
+<p>Following Android design patterns doesn't mean that your app has to look the same as
+everyone else's. In Android, your app can shine as an extension of your brand. </p>
+
+<h2 id="color">Color</h2>
+
+<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>Look for opportunities to use high-contrast color for emphasis, for example, as the background color of the action bar or a primary button. But don't go overboard: not all actions are equal, so use it only for the one or two most important things.</p>
+<p>When customizing colors, <a href="{@docRoot}design/style/touch-feedback.html">touch feedback</a>
+  should be subtle &mdash; just slightly lighter or darker than the untouched color.</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/branding_wallet.png" style="width:94%">
+    <div class="figure-caption">
+      The four colors of the Google Wallet logo provide a playful accent to the four dots
+      that appear as the user enters a PIN.
+    </div>
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/branding_googlemusic.png" style="width:94%">
+    <div class="figure-caption">
+      The Google Play Music app has an orange theme color, which is used for emphasis
+      in the action bar and for accent in the selected tab, scroll indicator, and
+      hyperlinks.
+    </div>
+  </div>
+</div>
+
+<h2 id="logo">Logo</h2>
+
+<p>Your app's <a href="{@docRoot}design/style/iconography.html#launcher">launcher icon</a> is
+  a key place to incorporate your logo, because it's what
+  users will look for and touch to begin using your app. You can carry the launcher
+  icon through to all the screens in your app by showing it in the
+  <a href="{@docRoot}design/patterns/actionbar.html">action bar</a> along
+  with the name of the app.</p>
+
+<p>Another approach to consider is to have your logo take the place of the launcher icon
+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>
+
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/yourbranding_app.png" style="width:94%">
+    <div class="figure-caption">
+      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>
+</div> 
+
+<h2 id="logo">Icons</h2>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <p>If you have icons that you're already using for your app on other platforms
+    and they have a distinctive look intended to fit your brand, use them on your
+    Android app as well. <strong>If you take this approach, make sure your brand styling is
+    applied to every single icon in your app</strong>.</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;"">
+    </div>
+  </div>
+</div>
+  <p>One exception: For any icon in your existing set where the symbol is different from
+  Android's, use Android's symbol but give it your brand's styling. That way, users will
+  understand what the purpose of the icon is based on what they've learned in other
+  Android apps (Design principle:
+  <a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that
+  work everywhere</a>). But the icon will still look like it belongs with all of
+  your other icons as a part of your brand.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <p><strong>Example</strong>:<br />
+    </p>
+    <p>The brand's normal icon for sharing on other platforms is a right arrow.
+  </div>
+
+  <div class="layout-content-col span-6 lasyout-with-list-item-margins">
+
+    <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>
+    </div>
+      <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:200px;">
+  </div>
+</div>
+
+<p>What if you don't already have your own icons &mdash; for example, if you're creating a
+brand new app only for Android? In this case, use Android's standard icons and rely
+more on color and logo for branding. Get the Action Bar Icon Pack, available for free
+in <a href="{@docRoot}design/downloads/index.html">Downloads</a>.</p>
diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd
index 0ce2faf..b0a3439 100644
--- a/docs/html/design/style/iconography.jd
+++ b/docs/html/design/style/iconography.jd
@@ -23,9 +23,9 @@ units, which are based on the pixel dimensions of a medium-density (MDPI) screen
 
 <img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" />
 
-<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6 scaling
-ratio</strong> between the four primary densities (medium, high, x-high, and xx-high,
-respectively). For example, consider that the size for a launcher icon is specified to be
+<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6:8
+scaling ratio</strong> between the five primary densities (medium, high, x-high, xx-high, and
+xxx-high respectively). For example, consider that the size for a launcher icon is specified to be
 48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the
 high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high
 density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.</p>
diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd
index 0a99a2f..c375631 100644
--- a/docs/html/design/style/metrics-grids.jd
+++ b/docs/html/design/style/metrics-grids.jd
@@ -12,8 +12,9 @@ screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp).</li>
  <li>The density buckets are <acronym
 title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160
 dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, <acronym title
-="Extra-high density (320 dpi)">XHDPI</acronym>, and <acronym title
-="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>.</li>
+="Extra-high density (320 dpi)">XHDPI</acronym>, <acronym title
+="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>, and <acronym title
+="Extra-extra-extra!-high density (640 dpi)">XXXHDPI</acronym>.</li>
 </ul>
 
 <p>Optimize your application's UI by designing
diff --git a/docs/html/design/style/themes.jd b/docs/html/design/style/themes.jd
index e1899e3..2dc8ead 100644
--- a/docs/html/design/style/themes.jd
+++ b/docs/html/design/style/themes.jd
@@ -14,22 +14,16 @@ page.title=Themes
       Settings in Holo Dark.
     </div>
 
-    <img src="{@docRoot}design/media/themes_holo_inverse.png">
-    <div class="figure-caption">
-      Talk in Holo Light with dark action bar.
-    </div>
-
   </div>
   <div class="layout-content-col span-7">
 
-<p>Themes are Android's mechanism for applying a consistent style to an app or activity. The style
-specifies the visual properties of the elements that make up your user interface, such as color,
-height, padding and font size. To promote greater cohesion between all apps on the platform, Android
-provides three system themes that you can choose from when building apps for Ice Cream Sandwich:</p>
+<p>Themes are Android's mechanism for applying a consistent style to an app or activity.
+The style specifies the visual properties of the elements that make up your user interface,
+such as color, height, padding and font size. To promote greater cohesion between all apps
+on the platform, Android provides two system themes that you can choose from when building apps:</p>
 <ul>
 <li>Holo Light</li>
 <li>Holo Dark</li>
-<li>Holo Light with dark action bars</li>
 </ul>
 <p>Applying these themes will go a long way in helping you to build apps that fit right into the
 general visual language of Android.</p>
diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd
index 340a3a4..a5bf7b3 100644
--- a/docs/html/design/style/touch-feedback.jd
+++ b/docs/html/design/style/touch-feedback.jd
@@ -2,15 +2,43 @@ page.title=Touch Feedback
 page.tags="input","button"
 @jd:body
 
-<div class="layout-content-row" style="margin-bottom: -100px">
+    <div class="layout-content-row" style="margin-bottom: -100px">
   <div class="layout-content-col span-7">
 
-<p>Use color and illumination 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 visual response. This lets the
-user know which object was touched and that your app is "listening".</p>
+<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
+response. Make it subtle &mdash;just slightly lighter or darker than the untouched color. This
+provides two benefits:</p>
+
+<ul>
+<li><a href="{@docRoot}design/get-started/principles.html#sprinkle-encouragement">Sprinkles
+of encouragement</a> are more pleasant than jolts.</li>
+<li>Incorporating <a href="{@docRoot}design/style/branding.html">your branding</a> is much
+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">
@@ -18,51 +46,54 @@ user know which object was touched and that your app is "listening".</p>
   </div>
 </div>
 
-<h4>States</h4>
+<h4 style="clear:both;">States</h4>
+
 
 <div class="vspace size-1">&nbsp;</div>
 
 <img src="{@docRoot}design/media/touch_feedback_states.png">
 <div class="figure-caption">
-  Most of Android's UI elements have touch-feedback built in, including states that indicate
-  whether touching the element will have any effect.
+  Most of Android's UI elements have touch feedback built in, including
+  states that indicate whether touching the element will have any effect.
 </div>
 
-<div class="vspace size-4">&nbsp;</div>
+<div class="vspace size-3">&nbsp;</div>
 
 <div class="layout-content-row">
-  <div class="layout-content-col span-4">
+  <div class="layout-content-col span-6">
 
-<h4>Communication</h4>
-<p>When your objects react to more complex gestures, help users understand what the outcome of the
-operation will be. For example, in Recents, when you start swiping a thumbnail left or right, it
-starts to dim. This helps the user understand that swiping will cause the item to be removed.</p>
+    <h4>Communication</h4>
+<p>When your objects react to more complex gestures, help users
+understand what the outcome will be.</p>
 
+<p>In Recents, when a user starts swiping a thumbnail left or right, it
+begins to dim. This helps the user understand that swiping will cause the
+item to be removed.</p>
   </div>
-  <div class="layout-content-col span-9">
+  <div class="layout-content-col span-7">
 
     <img src="{@docRoot}design/media/touch_feedback_manipulation.png">
 
   </div>
 </div>
+<div class="vspace size-3">&nbsp;</div>
 
 <div class="layout-content-row">
   <div class="layout-content-col span-6">
 
     <img src="{@docRoot}design/media/touch_feedback_communication.png">
+    <p><em>If a user attempts to scroll past the last home screen panel, the screen
+    content tilts to the right to indicate that further navigation in this direction
+    isn’t possible.</em></p>
 
   </div>
   <div class="layout-content-col span-6">
 
-<div class="vspace size-3">&nbsp;</div>
-
 <h4>Boundaries</h4>
-<p>When users try to scroll past the upper or lower limit of a scrollable area, communicate the
-boundary with a visual cue. For example, if a user attempts to scroll past the first home screen
-panel, the screen content tilts to the right to indicate that further navigation in this direction
-is not possible. Many of Android's scrollable UI widgets (e.g. lists or grid lists) already have
-support for boundary feedback built in. If you are building custom, keep boundary feedback in mind
-and provide it from within your app.</p>
-
-  </div>
-</div>
+<p>
+  When users try to scroll past the beginning or end of a scrollable area,
+  communicate the boundary with a visual cue. Many of Android's scrollable UI
+  widgets, like lists and grid lists, have support for boundary feedback built
+  in. If you’re building custom widgets, keep boundary feedback in mind and
+  provide it from within your app.
+</p>
\ No newline at end of file
diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd
index 818af4c..3c201f7 100644
--- a/docs/html/design/style/typography.jd
+++ b/docs/html/design/style/typography.jd
@@ -12,7 +12,7 @@ page.tags="textview","font"
 
 <p>
   <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto ZIP']);"
-    href="{@docRoot}downloads/design/roboto-1.100141.zip">Download Roboto</a>
+    href="{@docRoot}downloads/design/roboto-1.2.zip">Download Roboto</a>
 </p>
 
 <p>The Android design language relies on traditional typographic tools such as scale, space, rhythm,
@@ -30,7 +30,7 @@ variant in regular and bold weights, along with an italic style for each weight.
     <img src="{@docRoot}design/media/typography_variants@2x.png" width="220">
 
 <p><a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specimen Booke (@typography page)']);"
-      href="{@docRoot}downloads/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a></p>
+      href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a></p>
 
   </div>
 </div>
diff --git a/docs/html/design/style/writing.jd b/docs/html/design/style/writing.jd
index 5358847..cda17eb 100644
--- a/docs/html/design/style/writing.jd
+++ b/docs/html/design/style/writing.jd
@@ -2,46 +2,24 @@ page.title=Writing Style
 page.tags="dialog","toast","notification"
 @jd:body
 
-<p>When choosing words for your app:</p>
-<ol>
-<li>
-<p><strong>Keep it brief.</strong> Be concise, simple and precise. Start with a 30 character limit (including
-   spaces), and don't use more unless absolutely necessary.</p>
-</li>
-<li>
-<p><strong>Keep it simple.</strong> Pretend you're speaking to someone who's smart and competent, but doesn't
-   know technical jargon and may not speak English very well. Use short words, active verbs, and
-   common nouns.</p>
-</li>
-<li>
-<p><strong>Be friendly.</strong> Use contractions. Talk directly to the reader using second person ("you"). If
-   your text doesn't read the way you'd say it in casual conversation, it's probably not the way
-   you should write it. Don't be abrupt or annoying and make the user feel safe, happy and
-   energized.</p>
-</li>
-<li>
-<p><strong>Put the most important thing first.</strong> The first two words (around 11 characters, including
-   spaces) should include at least a taste of the most important information in the string. If they
-   don't, start over.</p>
-</li>
-<li>
-<p><strong>Describe only what's necessary, and no more.</strong> Don't try to explain subtle differences. They
-   will be lost on most users.</p>
-</li>
-<li>
-<p><strong>Avoid repetition.</strong> If a significant term gets repeated within a screen or block of text, find
-   a way to use it just once.</p>
-</li>
-</ol>
+<h2 id="voa">Android's Voice</h2>
 
-<h2 id="examples">Examples</h2>
+<p>When writing text that appears in your app, keep it concise, simple, and friendly.</p>
 
-<ol><li class="value-1"><strong>Keep it brief.</strong> From the setup wizard:</ol>
+<h4 id="concise">Concise</h4>
+
+<ul>
+  <li>Describe only what the user needs to know.</li>
+  <li>Eliminate redundancy, such as titles that restate the body of an information box.</li>
+  <li>Keep text as short as possible.</li>
+</ul>
+
+<p><em>Avoid wordy, stilted text</em></p>
 
 <div class="layout-content-row">
   <div class="layout-content-col span-6 layout-with-list-item-margins">
 
-    <div class="do-dont-label bad">Too formal</div>
+    <div class="do-dont-label bad">Don't</div>
 
     <table class="ui-table good"><tbody><tr><td>
     Consult the documentation that came with your phone for further instructions.
@@ -50,7 +28,7 @@ page.tags="dialog","toast","notification"
   </div>
   <div class="layout-content-col span-6">
 
-    <div class="do-dont-label good">Better</div>
+    <div class="do-dont-label good">Do</div>
 
     <table class="ui-table good"><tbody><tr><td>
     Read the instructions that came with your phone.
@@ -59,27 +37,27 @@ page.tags="dialog","toast","notification"
   </div>
 </div>
 
-<div class="vspace size-1">&nbsp;</div>
-
-<ol><li class="value-2"><strong>Keep it simple.</strong> From the Location settings screen:</ol>
+<p><em>Don't provide unnecessary information</em></p>
 
 <div class="layout-content-row">
   <div class="layout-content-col span-6 layout-with-list-item-margins">
 
-    <div class="do-dont-label bad">Confusing</div>
+    <div class="do-dont-label bad">From a Setup Wizard screen</div>
 
     <table class="ui-table bad">
     <thead>
       <tr>
         <th>
-        Use GPS satellites
+        Signing in...
         </th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>
-        When locating, accurate to street level.
+        Your phone needs to communicate with<br>
+        Google servers to sign in to your account.<br>
+        This may take up to five minutes.
         </td>
       </tr>
     </tbody>
@@ -88,20 +66,21 @@ page.tags="dialog","toast","notification"
   </div>
   <div class="layout-content-col span-6">
 
-    <div class="do-dont-label good">Better</div>
+    <div class="do-dont-label good">From a Setup Wizard screen</div>
 
     <table class="ui-table good">
     <thead>
       <tr>
         <th>
-        GPS
+        Signing in...
         </th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>
-        Let apps use satellites to pinpoint your location.
+        Your phone is contacting Google.<br>
+        This can take up to 5 minutes.
         </td>
       </tr>
     </tbody>
@@ -110,143 +89,111 @@ page.tags="dialog","toast","notification"
   </div>
 </div>
 
-<div class="vspace size-1">&nbsp;</div>
+<h4 id="simple">Simple</h4>
+
+<ul>
+  <li>Use short words, active verbs, and common nouns.</li>
+  <li>Put the most important thing first. “Front-load” the first 11 characters
+      with the most salient information in the string.</li>
+  <li>Don’t try to explain subtle differences. They are lost on most users.</li>
+</ul>
 
-<ol><li class="value-3"><strong>Be friendly.</strong> Dialog that appears when an application
-crashes:</ol>
+<p><em>Focus on the user's concern, not technical details</em></p>
 
 <div class="layout-content-row">
   <div class="layout-content-col span-6 layout-with-list-item-margins">
 
-    <div class="do-dont-label bad">Confusing and annoying&mdash;"Sorry" just rubs salt in the
-    wound.</div>
+    <div class="do-dont-label bad">Don't</div>
 
-    <table class="ui-table bad">
-    <thead>
-      <tr>
-        <th colspan="3">
-        Sorry!
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td colspan="3">
-        Activity MyAppActivity (in application MyApp)
-        is not responding.
-        </td>
-      </tr>
-    </tbody>
-    <tfoot>
-      <tr>
-        <td width="33%">Force close</td>
-        <td width="33%">Wait</td>
-        <td width="33%">Report</td>
-      </tr>
-    </tbody>
-    </table>
+    <table class="ui-table good"><tbody><tr><td>
+    Manually control GPS to prevent other apps from using it
+    </td></tr></tbody></table>
 
   </div>
   <div class="layout-content-col span-6">
 
-    <div class="do-dont-label good">Shorter, more direct, no faux-apologetic title:<br><br></div>
+    <div class="do-dont-label good">Do</div>
 
-    <table class="ui-table good">
-    <thead>
-      <tr>
-        <th colspan="3">
-        MyApp isn't responding.
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td colspan="3">
-        Do you want to close it?
-        </td>
-      </tr>
-    </tbody>
-    <tfoot>
-      <tr>
-        <td width="33%">Wait</td>
-        <td width="33%">Report</td>
-        <td width="33%">Close</td>
-      </tr>
-    </tbody>
-    </table>
+    <table class="ui-table good"><tbody><tr><td>
+    To save power, switch Location mode to Battery saving
+    </td></tr></tbody></table>
 
   </div>
 </div>
 
-<div class="vspace size-1">&nbsp;</div>
-
-<ol><li class="value-4"><strong>Put the most important thing first.</strong></ol>
+<p><em>Put top news first</em></p>
 
 <div class="layout-content-row">
   <div class="layout-content-col span-6 layout-with-list-item-margins">
 
-    <div class="do-dont-label bad">Top news last</div>
+    <div class="do-dont-label bad">Don't</div>
 
-    <table class="ui-table bad"><tbody><tr><td>
-    77 other people +1'd this, including Larry Page.
+    <table class="ui-table good"><tbody><tr><td>
+    77 other people +1’d this, including Larry Page
     </td></tr></tbody></table>
 
   </div>
   <div class="layout-content-col span-6">
 
-    <div class="do-dont-label good">Top news first</div>
+    <div class="do-dont-label good">Do</div>
 
     <table class="ui-table good"><tbody><tr><td>
-    Larry Page and 77 others +1'd this.
+    Larry Page and 76 others +1’d this
     </td></tr></tbody></table>
 
   </div>
 </div>
 
+<p><em>Put the user's goal first</em></p>
+
 <div class="layout-content-row">
   <div class="layout-content-col span-6 layout-with-list-item-margins">
 
-    <div class="do-dont-label bad">Task last</div>
+    <div class="do-dont-label bad">Don't</div>
 
-    <table class="ui-table bad"><tbody><tr><td>
-    Touch Next to complete setup using a Wi-Fi connection.
+    <table class="ui-table good"><tbody><tr><td>
+    Touch Next to complete setup using a Wi-Fi connection
     </td></tr></tbody></table>
 
   </div>
   <div class="layout-content-col span-6">
 
-    <div class="do-dont-label good">Task first</div>
+    <div class="do-dont-label good">Do</div>
 
     <table class="ui-table good"><tbody><tr><td>
-    To finish setup using Wi-Fi, touch Next.
+    To finish setup using Wi-Fi, touch Next
     </td></tr></tbody></table>
 
   </div>
 </div>
 
-<div class="vspace size-1">&nbsp;</div>
 
-<ol><li class="value-5"><strong>Describe only what's necessary, and no more.</strong></ol>
+<h4 id="friendly">Friendly</h4>
 
+<ul>
+  <li>Use contractions.</li>
+  <li>Talk directly to the reader. Use “you”  to refer to the reader.</li>
+  <li>Keep your tone casual and conversational, but avoid slang.</li>
+</li>
+</ul>
+
+<p><em>Avoid being confusing or annoying</em></p>
 <div class="layout-content-row">
   <div class="layout-content-col span-6 layout-with-list-item-margins">
-
-    <div class="do-dont-label bad">From a Setup Wizard screen</div>
-
+    <div class="do-dont-label bad">Don't</div>
     <table class="ui-table bad">
     <thead>
       <tr>
         <th>
-        Signing in...
+        Sorry!
         </th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>
-        Your phone needs to communicate with<br>
-        Google servers to sign in to your account.<br>
-        This may take up to five minutes.
+        Activity MyAppActivity (in application<br />
+        MyApp) is not responding
         </td>
       </tr>
     </tbody>
@@ -254,26 +201,122 @@ crashes:</ol>
 
   </div>
   <div class="layout-content-col span-6">
-
-    <div class="do-dont-label good">From a Setup Wizard screen</div>
-
+    <div class="do-dont-label good">Do</div>
     <table class="ui-table good">
     <thead>
       <tr>
         <th>
-        Signing in...
+        MyApp isn’t responding 
         </th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>
-        Your phone is contacting Google.<br>
-        This can take up to 5 minutes.
+        Do you want to close it?
         </td>
       </tr>
     </tbody>
     </table>
-
   </div>
 </div>
+
+
+<h4>Words to avoid</h4>
+
+<div style="padding:5px 2.1em;">
+<table>
+  <tr>
+    <td class="do-dont-label bad" style="width:40%">Don't use</td>
+    <td class="do-dont-label good" style="width:40%">Use</td>
+  </tr>
+  <tr>
+    <td>one, two, three, four, ...</td>
+    <td>1, 2, 3, 4, ...</td>
+  </tr>
+  <tr>
+    <td>application</td>
+    <td>app</td>
+  </tr>
+  <tr>
+    <td>cannot, could not, do not, did not 
+will not, you will</td>
+    <td><em>Contractions:</em> can’t, couldn’t, don’t, didn’t won’t, you’ll, and so on</td>
+  </tr>
+    <tr>
+    <td>okay, ok</td>
+    <td>OK</td>
+  </tr>
+  <tr>
+    <td>please, sorry, thank you</td>
+    <td><em>Attempts at politeness can annoy the user, especially in messages that say
+        something has gone wrong.<br />
+        Exception: In Japanese, “please” is mandatory and imperative verbs should
+        be localized accordingly (turn on -> please turn on).
+        </em></td>
+  </tr>
+    <tr>
+    <td>there is, there are, it is<br />
+        <em>and other “disappeared” subjects (grammatical expletives)</em></td>
+    <td><em>Use a noun as the subject</em></td>
+  </tr>
+  <tr>
+    <td>abort, kill, terminate</td>
+    <td>stop, cancel, end, exit</td>
+  </tr>
+    <tr>
+    <td>fail, failed, <em>negative language</em></td>
+    <td><em>In general, use positive phrasing<br />
+        (for example, “do” rather than “don’t,” except in cases such as “Don’t show
+        again,” “Can’t connect,” and so on.)</em></td>
+  </tr>
+  <tr>
+    <td>me, I, my, mine</td>
+    <td>you, your, yours</td>
+  </tr>
+    <tr>
+    <td>Are you sure? Warning!</td>
+    <td><em>Tell user the consequence instead, for example, “You’ll lose all photos 
+        and media”</em></td>
+  </tr>
+</table>
+
+</div>
+
+<h2 id="formatting_text">Formatting text</h2>
+
+<h4 id="capitalization">Capitalization</h4>
+
+<ul>
+  <li>Use sentence-style capitalization for all UI strings: “Words to live by.”</li>
+  <li>Capitalize all important words in: 
+    <ul>
+      <li>App names (Calendar, Google Drive)</li>
+      <li>Named features (Android Beam, Face Unlock)</li>
+      <li>Proper nouns (Statue of Liberty, San Francisco Giants)</li>
+    </ul>
+  </li>
+  <li>Be conservative. Don't capitalize words that aren't part of a formal feature name: 
+    <ul>
+      <li>Sim card lock, Home screen, not Sim Card Lock, Home Screen.</li>
+    </ul>
+  </li>
+</ul>
+
+
+<h4 id="punctuation">Punctuation</h4>
+<ul>
+  <li><strong>Period.</strong> Don't use a period after a single sentence or
+  phrase used in isolation, such as in a toast, label, or notification. Wherever two or
+  more sentences run together, use a period for each sentence. </li>
+  <li><strong>Ellipsis.</strong> Use the ellipsis character (…) (Option-; on MacOS and &amp;hellip;
+    in HTML) to indicate 
+    <ul>
+      <li>Incompleteness, such as an action in progress (“Downloading...”) or truncated text.</li>
+      <li>That a menu item (such as Print… or Share…) leads to further UI involving significant
+        choices. Exception: Commands whose wording already implies further (but limited) UI, such
+        as <strong>Find in page</strong> or <strong>Pick a date</strong>, do not require an
+        ellipsis. </li>
+    </ul>
+  </li>
+</ul>
\ No newline at end of file