1 files changed, 78 insertions, 34 deletions
diff --git a/docs/html/design/tv/patterns.jd b/docs/html/design/tv/patterns.jd
index be7ae31..e786ee5 100644
--- a/docs/html/design/tv/patterns.jd
+++ b/docs/html/design/tv/patterns.jd
@@ -15,24 +15,16 @@ page.title=UI Patterns for TV
 
 <img src="{@docRoot}design/tv/images/focus.png" alt="TV navigation and focus diagram" />
 
-<p>A key aspect of making your application work well with a D-Pad controller is to make sure
+<p>A key aspect of making your application work well with a D-pad controller is to make sure
   that there is always an object that is obviously in focus. Your app must clearly indicate
   what object is focused, so users can easily see what action they can take. Use scale, shadow
   brightness, opacity, animation or a combination of these attributes to help users see a focused
   object.</p>
 
+<h2 id="banner">App and Game Banners</h3>
 
-<h2>Icons</h2>
-
-<p>Apps on TV devices require some additional icon images for presentation in the system
-  user interface, including home screen launcher images (banners) and recommendation icons.
-  The visual specifications for these icons are shown below.</p>
-
-
-<h3 id="banner">Banners</h3>
-
-<p>App Banners represent your app on the home screen of TV devices and serve and as a way for
-  users to launch your app. Here are specific requirements for a banner image:
+<p>App Banners represent your app or game on the home screens of TV devices and serve and as a way for
+  users to launch your app. Here are the specific requirements for a banner image:
 </p>
 
 <ul>
@@ -44,45 +36,97 @@ page.title=UI Patterns for TV
 <p>See <a href="{@docRoot}training/tv/start/start.html#banner">Provide a home screen banner</a>
 in Get Started with TV Apps for more information.</p>
 
-<h3>Recommendation Icons</h3>
+<h2 id="recommendation">Recommendations</h2>
 
-<p>Recommendation cards include a small icon that is imposed over a colored background.
-  An example and specifications for this icon are shown below:</p>
+<p>The first row of the Android TV home screen displays cards for content recommended by applications.
+Your application provides these recommendations, as described in <a href="{@docRoot}training/tv/discovery/recommendations.html">
+</a>. For a visual overview of recommendations, see <a href="design/tv/index.html#recommendations">
+Design for Android TV</a>.</p>
 
-<img src="{@docRoot}design/tv/images/icon.png" alt="Recommendation icon examples" />
+<div class="layout-content-row">
+  <div class="layout-content-col span-8 with-callouts">
+
+  <p>The design elements of the recommendation card are as follows:</p>
+  <ol>
+  <li><strong>Large icon</strong></li>
+  <li><strong>Content title</strong></li>
+  <li><strong>Content text</strong></li>
+  <li><strong>Small icon</strong></li>
+  </ol>
+
+  <p>The design specifications for these elements are described below.</p>
+
+  <p>You can also set a background image (not shown) and the color of the card's text area in the
+  recommendation notification. See <a href="{@docRoot}training/tv/discovery/recommendations.html">
+  Recommendations</a> for more information.</p>
 
-<p>Here are the requirements for recommendation icons:</p>
+  </div>
+  <div class="layout-content-col span-5">
+
+    <img src="{@docRoot}images/tv/recommend-card.png">
+
+  </div>
+</div>
+
+<h3>Background Image</h3>
+
+<p>The background image also appears behind the recommendations
+row and fills the Android TV home screen when the user selects the recommendation card. This image
+should be different than the one provided for the large icon, and meet the following specifications:</p>
 
 <ul>
-  <li>Monocolor: size 16x16dp, white (#fff) icon with transparent background, PNG format</li>
-  <li>Graphics should be centered within the icon image</li>
+  <li>Measure 2016 x 1134 pixels (1920 x 1080 plus 5% margin for for motion)</li>
+  <li id="solid-background">Must not be transparent</li>
 </ul>
 
 <p class="note">
-  <strong>Note:</strong> Your app icon image may be desaturated and blended for some card
-  displays.
+  <strong>Note:</strong> If the background image does not meet the size requirements, the system
+  scales it to fit.
 </p>
 
-
-<h2>Background Images</h2>
-
-<p>Background images are displayed in the background of your app to provide additional visual
-  interest, information, or branding. The user interface widgets provided in the <a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support
+<p>The user interface widgets provided in the
+  <a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support
   library</a> provide specific support for background images and for updating them as items gain
-  and lose focus. The specific requirements for background images on TV devices is that they
-  should be full color and a size of 1920 x 1080 pixels.
+  and lose focus.
 </p>
 
-<p class="note" id="solid-background">
-  <strong>Important:</strong> Background images must not be transparent. Your must not allow any
-  portion of another app to be seen through your app.
-</p>
+<h3 id="icons">Icons</h3>
+
+<h4>Large icon</h4>
+
+<p>Typically, the large icon is an image of the content for the recommendation. It appears
+above a colored area that contains the recommendation content title and text. This image should be
+different from that which you provide for the background image, and conform to the following
+specifications:</p>
+
+<ul>
+  <li>Height: 176dp or more</li>
+  <li>Minimum width: 2/3 of the height (117dp for an image 176dp in height)</li>
+  <li>Max width: 4/3 of the height (234dp for an image 176dp in height)</li>
+  <li>Must not be transparent</li>
+</ul>
 
 <p class="note">
-  <strong>Note:</strong> If you background image does not meet the size requirements, it is scaled
-  to fit.
+  <strong>Note:</strong> If the large icon does not meet the size requirements, the system
+  scales it to fit.
 </p>
 
+<h4>Small icon</h4>
+
+<p>Recommendation cards include a small icon that is imposed over a colored background. The icon and
+background color display at 100% opacity when the card is selected, and at 50% opacity when not
+selected.</p>
+
+<img src="{@docRoot}design/tv/images/icon.png" alt="Recommendation icon examples" />
+
+<p>Here are the requirements for recommendation small icons:</p>
+
+<ul>
+  <li>Flat image</li>
+  <li>Monocolor: size 16x16dp, white (#fff) icon with transparent background, PNG format</li>
+  <li>Graphics should be centered within the icon image</li>
+</ul>
+
 <h2>Audio Feedback</h2>
 
 <p>Sounds on Android TV bring a cinematic quality to the interaction experience. You should