docs: move Android Design from static HTML to JD

Change-Id: I6e451599998cb8b69489cada482ab5db9d71d6f8
diff --git a/docs/html/design/building-blocks/buttons.html b/docs/html/design/building-blocks/buttons.html
deleted file mode 100644
index 9f9652f9..0000000
--- a/docs/html/design/building-blocks/buttons.html
+++ /dev/null
@@ -1,197 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Buttons
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Buttons</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<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>
-
-<div style="text-align: center">
-  <img src="../static/content/buttons_basic.png">
-</div>
-
-<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="../static/content/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>
-  <div class="layout-content-col span-6">
-    <div class="figure-caption">
-      Small buttons in Holo Dark &amp; Light.
-    </div>
-  </div>
-</div>
-
-<h2 id="borderless">Borderless Buttons</h2>
-
-<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>
-
-<img src="../static/content/buttons_borderless.png">
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd
new file mode 100644
index 0000000..18beab0
--- /dev/null
+++ b/docs/html/design/building-blocks/buttons.jd
@@ -0,0 +1,40 @@
+page.title=Buttons
+@jd:body
+
+<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>
+
+<div style="text-align: center">
+  <img src="{@docRoot}design/media/buttons_basic.png">
+</div>
+
+<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>
+  <div class="layout-content-col span-6">
+    <div class="figure-caption">
+      Small buttons in Holo Dark &amp; Light.
+    </div>
+  </div>
+</div>
+
+<h2 id="borderless">Borderless Buttons</h2>
+
+<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>
+
+<img src="{@docRoot}design/media/buttons_borderless.png">
diff --git a/docs/html/design/building-blocks/dialogs.html b/docs/html/design/building-blocks/dialogs.html
deleted file mode 100644
index f03a57a..0000000
--- a/docs/html/design/building-blocks/dialogs.html
+++ /dev/null
@@ -1,269 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Dialogs
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Dialogs</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Dialogs prompt the user for decisions or additional information required by the app to continue a
-task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the
-user to adjust settings or enter text.</p>
-
-<img src="../static/content/dialogs_main.png">
-
-<div class="with-callouts">
-
-<ol>
-<li>
-<h4>Optional title region</h4>
-<p>The title introduces the content of your dialog. It can, for example, identify the name of a
- setting that the user is about to change, or request a decision.</p>
-</li>
-<li>
-<h4>Content area</h4>
-<p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as
- sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system
- settings. In other cases, such as alerts, the content may consist solely of text that provides
- further context for a user decision.</p>
-</li>
-<li>
-<h4>Action buttons</h4>
-<p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely
- action. However, if the options consist of specific actions such as Close or Wait rather than
- a confirmation or cancellation of the action described in the content, then all the buttons
- should be active verbs. As a rule, the dismissive action of a dialog is always on the left
- whereas the affirmative actions are on the right.</p>
-</li>
-</ol>
-
-</div>
-
-<img src="../static/content/dialogs_examples.png">
-<div class="figure-caption">
-  Samples of typical dialog use in Android.
-</div>
-
-<h2 id="alerts">Alerts</h2>
-
-<p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before
-proceeding. They differ slightly in appearance based upon the severity and impact of the message
-conveyed.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/dialogs_w_no_title.png">
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Alerts without title bars</h4>
-<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed
-up succinctly in a sentence or two. The content area should either ask a question (such as "Delete
-this conversation?") or make a clear statement whose relationship to the action buttons is obvious.</p>
-
-  </div>
-</div>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/dialogs_w_title.png">
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Alerts with title bars</h4>
-<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving
-potential loss of data, connectivity, extra charges, and so on requires a clear question or
-statement (the title) and some additional explanation (in the content area).</p>
-<p>Keep the question or statement short: for example, "Erase USB storage?" Avoid apologies. A user
-should be able to skip the content completely and still have a clear idea of what choices are
-available based on the title and the text of the action buttons.</p>
-
-  </div>
-</div>
-
-
-<h2 id="popups">Popups</h2>
-
-<p>Popups are lightweight version of dialogs that require a single selection from the user. Popups
-don't have have explicit buttons that accept or cancel the operation. Instead, making a selection
-advances the workflow, and simply touching outside the popup dismisses it.</p>
-
-<img src="../static/content/dialogs_popups_example.png">
-
-
-<h2 id="toasts">Toasts</h2>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <div class="vspace size-6"></div>
-
-<p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating
-away from an email before you send it triggers a "Draft saved" toast to let you know that you can
-continue editing later. Toasts automatically disappear after a timeout.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/dialogs_toasts.png">
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd
new file mode 100644
index 0000000..9b653ee
--- /dev/null
+++ b/docs/html/design/building-blocks/dialogs.jd
@@ -0,0 +1,112 @@
+page.title=Dialogs
+@jd:body
+
+<p>Dialogs prompt the user for decisions or additional information required by the app to continue a
+task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the
+user to adjust settings or enter text.</p>
+
+<img src="{@docRoot}design/media/dialogs_main.png">
+
+<div class="with-callouts">
+
+<ol>
+<li>
+<h4>Optional title region</h4>
+<p>The title introduces the content of your dialog. It can, for example, identify the name of a
+ setting that the user is about to change, or request a decision.</p>
+</li>
+<li>
+<h4>Content area</h4>
+<p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as
+ sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system
+ settings. In other cases, such as alerts, the content may consist solely of text that provides
+ further context for a user decision.</p>
+</li>
+<li>
+<h4>Action buttons</h4>
+<p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely
+ action. However, if the options consist of specific actions such as Close or Wait rather than
+ a confirmation or cancellation of the action described in the content, then all the buttons
+ should be active verbs. As a rule, the dismissive action of a dialog is always on the left
+ whereas the affirmative actions are on the right.</p>
+</li>
+</ol>
+
+</div>
+
+<img src="{@docRoot}design/media/dialogs_examples.png">
+<div class="figure-caption">
+  Samples of typical dialog use in Android.
+</div>
+
+<h2 id="alerts">Alerts</h2>
+
+<p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before
+proceeding. They differ slightly in appearance based upon the severity and impact of the message
+conveyed.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/dialogs_w_no_title.png">
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Alerts without title bars</h4>
+<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed
+up succinctly in a sentence or two. The content area should either ask a question (such as "Delete
+this conversation?") or make a clear statement whose relationship to the action buttons is obvious.</p>
+
+  </div>
+</div>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/dialogs_w_title.png">
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Alerts with title bars</h4>
+<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving
+potential loss of data, connectivity, extra charges, and so on requires a clear question or
+statement (the title) and some additional explanation (in the content area).</p>
+<p>Keep the question or statement short: for example, "Erase USB storage?" Avoid apologies. A user
+should be able to skip the content completely and still have a clear idea of what choices are
+available based on the title and the text of the action buttons.</p>
+
+  </div>
+</div>
+
+
+<h2 id="popups">Popups</h2>
+
+<p>Popups are lightweight version of dialogs that require a single selection from the user. Popups
+don't have have explicit buttons that accept or cancel the operation. Instead, making a selection
+advances the workflow, and simply touching outside the popup dismisses it.</p>
+
+<img src="{@docRoot}design/media/dialogs_popups_example.png">
+
+
+<h2 id="toasts">Toasts</h2>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+    <div class="vspace size-6"></div>
+
+<p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating
+away from an email before you send it triggers a "Draft saved" toast to let you know that you can
+continue editing later. Toasts automatically disappear after a timeout.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/dialogs_toasts.png">
+
+  </div>
+</div>
diff --git a/docs/html/design/building-blocks/grid-lists.html b/docs/html/design/building-blocks/grid-lists.html
deleted file mode 100644
index 3f60216..0000000
--- a/docs/html/design/building-blocks/grid-lists.html
+++ /dev/null
@@ -1,237 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Grid Lists
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Grid Lists</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<img src="../static/content/gridview_overview.png">
-
-<p>Grid lists are an alternative to standard list views. They are best suited for showing data sets
-that represent themselves through images. In contrast to simple lists, grid lists may scroll either
-vertically or horizontally.</p>
-
-
-
-<h2 id="generic_grid">Generic Grids</h2>
-
-
-<p>The items in a grid list are arranged in two dimensions, one of which is fixed when scrolling
-content. The scrolling direction dictates the ordering of the items within the grid list. Since the
-scrolling direction is not deterministic, make it easy for the user to determine the orientation by
-cutting off grid items to communicate where the overflow is located.</p>
-<p>Avoid creating grid lists that scroll in two dimensions.</p>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/gridview_vertical.png">
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<h4>Vertical scrolling</h4>
-<p>Vertically scrolling grid list items are sorted in traditional western reading direction:
-left-to-right and top-down. When displaying the list, cut off the items in the bottom row to
-communicate that the user can scroll the list down to show additional items. Be sure to retain this
-scheme when the user rotates the screen.</p>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/gridview_horizontal.png">
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<h4>Horizontal scrolling</h4>
-<p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically
-scrolling lists, the sorting changes slightly to a top-down and left-to-right arrangement. Employ
-the same technique of cutting off the items in the rightmost column to indicate the scrolling
-direction.</p>
-<p>Don't use scrolling tabs as a means to switch views in conjunction with horizontally scrolling grid
-lists, because the horizontal gesture for view and content navigation will conflict. If you show
-scrolling tabs for view navigation together with a grid list, use vertical grid scrolling for list
-navigation.</p>
-
-  </div>
-</div>
-
-
-<h2 id="with-labels">Grid List with Labels</h2>
-
-<p>Use labels to display additional contextual information for your grid list items.</p>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/gridview_style.png">
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<h4>Style</h4>
-<p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to
-control the contrast and ensures legibility of the labels while letting the content "shine through".</p>
-
-  </div>
-</div>
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/grid-lists.jd b/docs/html/design/building-blocks/grid-lists.jd
new file mode 100644
index 0000000..775ebcc
--- /dev/null
+++ b/docs/html/design/building-blocks/grid-lists.jd
@@ -0,0 +1,79 @@
+page.title=Grid Lists
+@jd:body
+
+<img src="{@docRoot}design/media/gridview_overview.png">
+
+<p>Grid lists are an alternative to standard list views. They are best suited for showing data sets
+that represent themselves through images. In contrast to simple lists, grid lists may scroll either
+vertically or horizontally.</p>
+
+
+
+<h2 id="generic_grid">Generic Grids</h2>
+
+
+<p>The items in a grid list are arranged in two dimensions, one of which is fixed when scrolling
+content. The scrolling direction dictates the ordering of the items within the grid list. Since the
+scrolling direction is not deterministic, make it easy for the user to determine the orientation by
+cutting off grid items to communicate where the overflow is located.</p>
+<p>Avoid creating grid lists that scroll in two dimensions.</p>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/gridview_vertical.png">
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<h4>Vertical scrolling</h4>
+<p>Vertically scrolling grid list items are sorted in traditional western reading direction:
+left-to-right and top-down. When displaying the list, cut off the items in the bottom row to
+communicate that the user can scroll the list down to show additional items. Be sure to retain this
+scheme when the user rotates the screen.</p>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/gridview_horizontal.png">
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<h4>Horizontal scrolling</h4>
+<p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically
+scrolling lists, the sorting changes slightly to a top-down and left-to-right arrangement. Employ
+the same technique of cutting off the items in the rightmost column to indicate the scrolling
+direction.</p>
+<p>Don't use scrolling tabs as a means to switch views in conjunction with horizontally scrolling grid
+lists, because the horizontal gesture for view and content navigation will conflict. If you show
+scrolling tabs for view navigation together with a grid list, use vertical grid scrolling for list
+navigation.</p>
+
+  </div>
+</div>
+
+
+<h2 id="with-labels">Grid List with Labels</h2>
+
+<p>Use labels to display additional contextual information for your grid list items.</p>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/gridview_style.png">
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<h4>Style</h4>
+<p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to
+control the contrast and ensures legibility of the labels while letting the content "shine through".</p>
+
+  </div>
+</div>
diff --git a/docs/html/design/building-blocks/index.html b/docs/html/design/building-blocks/index.html
deleted file mode 100644
index 029cabf..0000000
--- a/docs/html/design/building-blocks/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Building Blocks
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-<style>
-#landing-graphic-container {
-  position: relative;
-}
-
-#text-overlay {
-  position: absolute;
-  left: 10px;
-  top: 472px;
-  width: 450px;
-}
-</style>
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-<div class="layout-content-row content-header just-links">
-  <div class="layout-content-col span-9">&nbsp;</div>
-  <div class="paging-links layout-content-col span-4">
-    <a href="#" class="prev-page-link">Previous</a>
-    <a href="#" class="next-page-link">Next</a>
-  </div>
-</div>
-
-
-          
-
-<div id="landing-graphic-container">
-  <div id="text-overlay">
-    Your inventory of ready-to-use elements for creating outstanding apps.
-    <br><br>
-    <a href="../building-blocks/tabs.html" class="landing-page-link">Tabs</a>
-  </div>
-
-  <a href="../building-blocks/tabs.html">
-    <img src="../static/content/building_blocks_landing.png">
-  </a>
-</div>
-
-
-
-          
-
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/index.jd b/docs/html/design/building-blocks/index.jd
new file mode 100644
index 0000000..52b4915
--- /dev/null
+++ b/docs/html/design/building-blocks/index.jd
@@ -0,0 +1,29 @@
+page.title=Building Blocks
+header.justLinks=1
+footer.hide=1
+@jd:body
+
+<style>
+#landing-graphic-container {
+  position: relative;
+}
+
+#text-overlay {
+  position: absolute;
+  left: 10px;
+  top: 472px;
+  width: 450px;
+}
+</style>
+
+<div id="landing-graphic-container">
+  <div id="text-overlay">
+    Your inventory of ready-to-use elements for creating outstanding apps.
+    <br><br>
+    <a href="{@docRoot}design/building-blocks/tabs.html" class="landing-page-link">Tabs</a>
+  </div>
+
+  <a href="{@docRoot}design/building-blocks/tabs.html">
+    <img src="{@docRoot}design/media/building_blocks_landing.png">
+  </a>
+</div>
diff --git a/docs/html/design/building-blocks/lists.html b/docs/html/design/building-blocks/lists.html
deleted file mode 100644
index dfd13d9..0000000
--- a/docs/html/design/building-blocks/lists.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Lists
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Lists</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Lists present multiple line items in a vertical arrangement. They can be used for data selection as
-well as drilldown navigation.</p>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row clearfix">
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/lists_main.png">
-
-  </div>
-  <div class="layout-content-col span-4 with-callouts">
-
-<ol>
-<li>
-<h4>Section Divider</h4>
-<p>Use section dividers to organize the content of your list into groups and facilitate scanning.</p>
-</li>
-<li>
-<h4>Line Items</h4>
-<p>List items can accommodate a wide range of data types in different arrangements, including
- simple single-line items, multi-line items, and custom items with icons, checkboxes, and action
- buttons.</p>
-</li>
-</ol>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/lists.jd b/docs/html/design/building-blocks/lists.jd
new file mode 100644
index 0000000..aaa86b8
--- /dev/null
+++ b/docs/html/design/building-blocks/lists.jd
@@ -0,0 +1,31 @@
+page.title=Lists
+@jd:body
+
+<p>Lists present multiple line items in a vertical arrangement. They can be used for data selection as
+well as drilldown navigation.</p>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row clearfix">
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/lists_main.png">
+
+  </div>
+  <div class="layout-content-col span-4 with-callouts">
+
+<ol>
+<li>
+<h4>Section Divider</h4>
+<p>Use section dividers to organize the content of your list into groups and facilitate scanning.</p>
+</li>
+<li>
+<h4>Line Items</h4>
+<p>List items can accommodate a wide range of data types in different arrangements, including
+ simple single-line items, multi-line items, and custom items with icons, checkboxes, and action
+ buttons.</p>
+</li>
+</ol>
+
+  </div>
+</div>
diff --git a/docs/html/design/building-blocks/pickers.html b/docs/html/design/building-blocks/pickers.html
deleted file mode 100644
index fc9989c..0000000
--- a/docs/html/design/building-blocks/pickers.html
+++ /dev/null
@@ -1,191 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Pickers
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Pickers</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Pickers provide a simple way to select a single value from a set. In addition to touching the
-up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe
-gesture.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-2">&nbsp;</div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/picker_space.png">
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Space considerations</h4>
-<p>Pickers can be used inline on a form, but their relatively large footprint is best suited for
-display in a dialog. For inline display, consider using more compact controls such as text fields or
-spinners.</p>
-
-  </div>
-</div>
-
-<h2 id="date-time">Date and time pickers</h2>
-
-<p>Android provides these as ready-to-use dialogs. Each picker is a dialog with a set of controls for
-entering the parts of the date (month, day, year) or time (hour, minute, AM/PM). Using these in your
-app helps ensure that a user's specification of a data or time input is valid and formatted
-correctly. The format of a time and date picker adjusts automatically to the locale.</p>
-
-<img src="../static/content/picker_datetime.png">
-
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/pickers.jd b/docs/html/design/building-blocks/pickers.jd
new file mode 100644
index 0000000..85f2187
--- /dev/null
+++ b/docs/html/design/building-blocks/pickers.jd
@@ -0,0 +1,32 @@
+page.title=Pickers
+@jd:body
+
+<p>Pickers provide a simple way to select a single value from a set. In addition to touching the
+up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe
+gesture.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-2">&nbsp;</div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/picker_space.png">
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Space considerations</h4>
+<p>Pickers can be used inline on a form, but their relatively large footprint is best suited for
+display in a dialog. For inline display, consider using more compact controls such as text fields or
+spinners.</p>
+
+  </div>
+</div>
+
+<h2 id="date-time">Date and time pickers</h2>
+
+<p>Android provides these as ready-to-use dialogs. Each picker is a dialog with a set of controls for
+entering the parts of the date (month, day, year) or time (hour, minute, AM/PM). Using these in your
+app helps ensure that a user's specification of a data or time input is valid and formatted
+correctly. The format of a time and date picker adjusts automatically to the locale.</p>
+
+<img src="{@docRoot}design/media/picker_datetime.png">
diff --git a/docs/html/design/building-blocks/progress.html b/docs/html/design/building-blocks/progress.html
deleted file mode 100644
index 500ccb1..0000000
--- a/docs/html/design/building-blocks/progress.html
+++ /dev/null
@@ -1,238 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Progress and Activity
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-
-
-          
-
-<div class="layout-content-row content-header">
-  <div class="layout-content-col span-9">
-    <h2 id="system">Feedback</h2>
-  </div>
-  <div class="paging-links layout-content-col span-4">
-    <a href="#" class="prev-page-link">Previous</a>
-    <a href="#" class="next-page-link">Next</a>
-  </div>
-</div>
-
-<p>When an operation of interest to the user is taking place over a relatively long period of time,
-provide visual feedback that it's still happening and in the process of being completed.</p>
-<h2 id="progress">Progress</h2>
-
-<p>If you know the percentage of the operation that has been completed, use a determinate progress bar
-to give the user a sense of how much longer it will take.</p>
-
-<img src="../static/content/progress_download.png">
-
-<p>The progress bar should always travel from 0% to 100% completion. Avoid setting the bar to a lower
-value than a previous value, or using the same progress bar to represent the progress of multiple
-events, since doing so makes the display meaningless. If you're not sure how long a particular
-operation will take, use an indeterminate progress indicator.</p>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<img src="../static/content/progress_themes.png">
-<div class="figure-caption">
-  Progress bar in Holo Dark and Holo Light.
-</div>
-
-<h2 id="activity">Activity</h2>
-
-<p>If you don't know how much longer an operation will continue, use an indeterminate progress
-indicator. There are two styles available: a flat bar and a circle. Use the one that best fits the
-available space.</p>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/progress_activity.png">
-
-  </div>
-  <div class="layout-content-col span-7 with-callouts">
-
-    <ol>
-      <li class="value-1"><h4>Activity bar (shown with the Holo Dark theme)</h4>
-        <p>
-
-An indeterminate activity bar is used at the start of an application download because Google Play hasn't
-been able to contact the server yet, and it's not possible to determine how long it will take for
-the download to begin.
-
-        </p>
-      </li>
-    </ol>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/progress_activity2.png">
-
-  </div>
-  <div class="layout-content-col span-7 with-callouts">
-
-    <ol>
-      <li class="value-2"><h4>Activity circle (shown with the Holo Light theme)</h4>
-        <p>
-
-An indeterminate activity circle is used in the Gmail application when a message is being
-loaded because it's not possible to determine how long it will take to download the email.
-
-        </p>
-      </li>
-    </ol>
-
-  </div>
-</div>
-
-<p>You should only use one activity indicator on screen per activity, and it should appropriately sized
-for the surrounding context. For example, the largest activity circle works well when displayed in a
-blank content area, but not in a smaller dialog box.</p>
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/progress.jd b/docs/html/design/building-blocks/progress.jd
new file mode 100644
index 0000000..dc3ded1
--- /dev/null
+++ b/docs/html/design/building-blocks/progress.jd
@@ -0,0 +1,80 @@
+page.title=Progress and Activity
+header.title=Feedback
+@jd:body
+
+<p>When an operation of interest to the user is taking place over a relatively long period of time,
+provide visual feedback that it's still happening and in the process of being completed.</p>
+<h2 id="progress">Progress</h2>
+
+<p>If you know the percentage of the operation that has been completed, use a determinate progress bar
+to give the user a sense of how much longer it will take.</p>
+
+<img src="{@docRoot}design/media/progress_download.png">
+
+<p>The progress bar should always travel from 0% to 100% completion. Avoid setting the bar to a lower
+value than a previous value, or using the same progress bar to represent the progress of multiple
+events, since doing so makes the display meaningless. If you're not sure how long a particular
+operation will take, use an indeterminate progress indicator.</p>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<img src="{@docRoot}design/media/progress_themes.png">
+<div class="figure-caption">
+  Progress bar in Holo Dark and Holo Light.
+</div>
+
+<h2 id="activity">Activity</h2>
+
+<p>If you don't know how much longer an operation will continue, use an indeterminate progress
+indicator. There are two styles available: a flat bar and a circle. Use the one that best fits the
+available space.</p>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/progress_activity.png">
+
+  </div>
+  <div class="layout-content-col span-7 with-callouts">
+
+    <ol>
+      <li class="value-1"><h4>Activity bar (shown with the Holo Dark theme)</h4>
+        <p>
+
+An indeterminate activity bar is used at the start of an application download because Google Play hasn't
+been able to contact the server yet, and it's not possible to determine how long it will take for
+the download to begin.
+
+        </p>
+      </li>
+    </ol>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/progress_activity2.png">
+
+  </div>
+  <div class="layout-content-col span-7 with-callouts">
+
+    <ol>
+      <li class="value-2"><h4>Activity circle (shown with the Holo Light theme)</h4>
+        <p>
+
+An indeterminate activity circle is used in the Gmail application when a message is being
+loaded because it's not possible to determine how long it will take to download the email.
+
+        </p>
+      </li>
+    </ol>
+
+  </div>
+</div>
+
+<p>You should only use one activity indicator on screen per activity, and it should appropriately sized
+for the surrounding context. For example, the largest activity circle works well when displayed in a
+blank content area, but not in a smaller dialog box.</p>
diff --git a/docs/html/design/building-blocks/scrolling.html b/docs/html/design/building-blocks/scrolling.html
deleted file mode 100644
index 3599a97..0000000
--- a/docs/html/design/building-blocks/scrolling.html
+++ /dev/null
@@ -1,194 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Scrolling
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Scrolling</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The
-scrolling speed is proportional to the speed of the gesture.</p>
-<h2 id="indicator">Scroll Indicator</h2>
-
-<p>Appears during scrolling to indicate what portion of the content is currently in view.</p>
-
-<div class="framed-galaxynexus-land-span-13">
-  <video class="play-on-hover" autoplay>
-    <source src="../static/content/scroll_indicator.mp4" type="video/mp4">
-    <source src="../static/content/scroll_indicator.webm" type="video/webm">
-    <source src="../static/content/scroll_indicator.ogv" type="video/ogg">
-  </video>
-</div>
-<div class="figure-caption">
-  <div class="video-instructions">&nbsp;</div>
-</div>
-
-<h2 id="index-scrolling">Index Scrolling</h2>
-
-<p>In addition to traditional scrolling, a long alphabetical list can also offer index scrolling: a way
-to quickly navigate to the items that begin with a particular letter. With index scrolling, a scroll
-indicator appears even when the user isn't scrolling. Touching or dragging it causes the current
-letter to pop up in a prominent way.</p>
-
-<div class="framed-galaxynexus-land-span-13">
-  <video class="play-on-hover" autoplay>
-    <source src="../static/content/scroll_index.mp4" type="video/mp4">
-    <source src="../static/content/scroll_index.webm" type="video/webm">
-    <source src="../static/content/scroll_index.ogv" type="video/ogg">
-  </video>
-</div>
-<div class="figure-caption">
-  <div class="video-instructions">&nbsp;</div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/scrolling.jd b/docs/html/design/building-blocks/scrolling.jd
new file mode 100644
index 0000000..7695157
--- /dev/null
+++ b/docs/html/design/building-blocks/scrolling.jd
@@ -0,0 +1,37 @@
+page.title=Scrolling
+@jd:body
+
+<p>Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The
+scrolling speed is proportional to the speed of the gesture.</p>
+<h2 id="indicator">Scroll Indicator</h2>
+
+<p>Appears during scrolling to indicate what portion of the content is currently in view.</p>
+
+<div class="framed-galaxynexus-land-span-13">
+  <video class="play-on-hover" autoplay>
+    <source src="{@docRoot}design/media/scroll_indicator.mp4" type="video/mp4">
+    <source src="{@docRoot}design/media/scroll_indicator.webm" type="video/webm">
+    <source src="{@docRoot}design/media/scroll_indicator.ogv" type="video/ogg">
+  </video>
+</div>
+<div class="figure-caption">
+  <div class="video-instructions">&nbsp;</div>
+</div>
+
+<h2 id="index-scrolling">Index Scrolling</h2>
+
+<p>In addition to traditional scrolling, a long alphabetical list can also offer index scrolling: a way
+to quickly navigate to the items that begin with a particular letter. With index scrolling, a scroll
+indicator appears even when the user isn't scrolling. Touching or dragging it causes the current
+letter to pop up in a prominent way.</p>
+
+<div class="framed-galaxynexus-land-span-13">
+  <video class="play-on-hover" autoplay>
+    <source src="{@docRoot}design/media/scroll_index.mp4" type="video/mp4">
+    <source src="{@docRoot}design/media/scroll_index.webm" type="video/webm">
+    <source src="{@docRoot}design/media/scroll_index.ogv" type="video/ogg">
+  </video>
+</div>
+<div class="figure-caption">
+  <div class="video-instructions">&nbsp;</div>
+</div>
diff --git a/docs/html/design/building-blocks/seek-bars.html b/docs/html/design/building-blocks/seek-bars.html
deleted file mode 100644
index aef1823..0000000
--- a/docs/html/design/building-blocks/seek-bars.html
+++ /dev/null
@@ -1,194 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Seek Bars and Sliders
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Seek Bars and Sliders</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Interactive sliders make it possible to select a value from a continuous or discrete range of values
-by moving the slider thumb. The smallest value is to the left, the largest to the right. The
-interactive nature of the slider makes it a great choice for settings that reflect intensity levels,
-such as volume, brightness, or color saturation.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/seekbar_example.png">
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<div class="vspace size-2">&nbsp;</div>
-
-<h4>Example</h4>
-<p>Interactive slider to set the ringer volume. The value can either be set through the hardware volume controls or interactively via a gesture.</p>
-
-  </div>
-</div>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/seekbar_style.png">
-    <div class="figure-caption">
-      Seek bars in Holo Light &amp; Dark
-    </div>
-
-  </div>
-  <div class="layout-content-col span-4">&nbsp;</div>
-</div>
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/seek-bars.jd b/docs/html/design/building-blocks/seek-bars.jd
new file mode 100644
index 0000000..3407ddd
--- /dev/null
+++ b/docs/html/design/building-blocks/seek-bars.jd
@@ -0,0 +1,36 @@
+page.title=Seek Bars and Sliders
+@jd:body
+
+<p>Interactive sliders make it possible to select a value from a continuous or discrete range of values
+by moving the slider thumb. The smallest value is to the left, the largest to the right. The
+interactive nature of the slider makes it a great choice for settings that reflect intensity levels,
+such as volume, brightness, or color saturation.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/seekbar_example.png">
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<div class="vspace size-2">&nbsp;</div>
+
+<h4>Example</h4>
+<p>Interactive slider to set the ringer volume. The value can either be set through the hardware volume controls or interactively via a gesture.</p>
+
+  </div>
+</div>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/seekbar_style.png">
+    <div class="figure-caption">
+      Seek bars in Holo Light &amp; Dark
+    </div>
+
+  </div>
+  <div class="layout-content-col span-4">&nbsp;</div>
+</div>
diff --git a/docs/html/design/building-blocks/spinners.html b/docs/html/design/building-blocks/spinners.html
deleted file mode 100644
index 5ef9d04..0000000
--- a/docs/html/design/building-blocks/spinners.html
+++ /dev/null
@@ -1,194 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Spinners
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Spinners</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Spinners provide a quick way to select one value from a set. In the default state, a spinner shows
-its currently selected value. Touching the spinner displays a dropdown menu with all other available
-values, from which the user can select a new one.</p>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/spinners_form.png">
-
-<h4>Spinners in forms</h4>
-<p>Spinners are useful for data picking in forms. They are compact and integrate nicely with other
-components. Use spinners in forms for both simple data input and in combination with other input
-fields. For example, a text field might let you edit an email address for a contact, while its
-associated spinner allows you to select whether it's a Home or Work address.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/spinners_actionbar.png">
-
-<h4>Spinners in action bars</h4>
-<p>Use spinners in action bars to switch views. For example, Gmail uses a spinner to permit switching
-between accounts or commonly used labels. Spinners are useful when changing the view is important to
-your app, but not necessarily a frequent occurrence. In cases where view switching is frequent, use
-tabs.</p>
-
-  </div>
-</div>
-
-<img src="../static/content/spinners_hololightanddark.png">
-<div class="figure-caption">
-  Spinners in the Holo Dark and Holo Light themes, in various states.
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/spinners.jd b/docs/html/design/building-blocks/spinners.jd
new file mode 100644
index 0000000..621a57c
--- /dev/null
+++ b/docs/html/design/building-blocks/spinners.jd
@@ -0,0 +1,37 @@
+page.title=Spinners
+@jd:body
+
+<p>Spinners provide a quick way to select one value from a set. In the default state, a spinner shows
+its currently selected value. Touching the spinner displays a dropdown menu with all other available
+values, from which the user can select a new one.</p>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/spinners_form.png">
+
+<h4>Spinners in forms</h4>
+<p>Spinners are useful for data picking in forms. They are compact and integrate nicely with other
+components. Use spinners in forms for both simple data input and in combination with other input
+fields. For example, a text field might let you edit an email address for a contact, while its
+associated spinner allows you to select whether it's a Home or Work address.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/spinners_actionbar.png">
+
+<h4>Spinners in action bars</h4>
+<p>Use spinners in action bars to switch views. For example, Gmail uses a spinner to permit switching
+between accounts or commonly used labels. Spinners are useful when changing the view is important to
+your app, but not necessarily a frequent occurrence. In cases where view switching is frequent, use
+tabs.</p>
+
+  </div>
+</div>
+
+<img src="{@docRoot}design/media/spinners_hololightanddark.png">
+<div class="figure-caption">
+  Spinners in the Holo Dark and Holo Light themes, in various states.
+</div>
diff --git a/docs/html/design/building-blocks/switches.html b/docs/html/design/building-blocks/switches.html
deleted file mode 100644
index 09af540..0000000
--- a/docs/html/design/building-blocks/switches.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Switches
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Switches</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
-buttons, and on/off switches.</p>
-<h2 id="checkboxes">Checkboxes</h2>
-
-<p>Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to
-turn an option off or on. Instead, use an on/off switch.</p>
-
-<div style="text-align: center">
-  <img src="../static/content/switches_checkboxes.png">
-</div>
-
-<h2 id="radio-buttons">Radio Buttons</h2>
-
-<p>Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive
-selection if you think that the user needs to see all available options side-by-side. Otherwise,
-consider a spinner, which uses less space.</p>
-
-<div style="text-align: center">
-  <img src="../static/content/switches_radios.png">
-</div>
-
-<h2 id="switches">On/off Switches</h2>
-
-<p>On/off switches toggle the state of a single settings option.</p>
-
-<div style="text-align: center">
-  <img src="../static/content/switches_switches.png">
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/switches.jd b/docs/html/design/building-blocks/switches.jd
new file mode 100644
index 0000000..607e0b6
--- /dev/null
+++ b/docs/html/design/building-blocks/switches.jd
@@ -0,0 +1,31 @@
+page.title=Switches
+@jd:body
+
+<p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
+buttons, and on/off switches.</p>
+<h2 id="checkboxes">Checkboxes</h2>
+
+<p>Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to
+turn an option off or on. Instead, use an on/off switch.</p>
+
+<div style="text-align: center">
+  <img src="{@docRoot}design/media/switches_checkboxes.png">
+</div>
+
+<h2 id="radio-buttons">Radio Buttons</h2>
+
+<p>Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive
+selection if you think that the user needs to see all available options side-by-side. Otherwise,
+consider a spinner, which uses less space.</p>
+
+<div style="text-align: center">
+  <img src="{@docRoot}design/media/switches_radios.png">
+</div>
+
+<h2 id="switches">On/off Switches</h2>
+
+<p>On/off switches toggle the state of a single settings option.</p>
+
+<div style="text-align: center">
+  <img src="{@docRoot}design/media/switches_switches.png">
+</div>
diff --git a/docs/html/design/building-blocks/tabs.html b/docs/html/design/building-blocks/tabs.html
deleted file mode 100644
index 029e484..0000000
--- a/docs/html/design/building-blocks/tabs.html
+++ /dev/null
@@ -1,217 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Tabs
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Tabs</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<img src="../static/content/tabs_overview.png">
-
-<p>Tabs in the action bar make it easy to explore and switch between different views or functional
-aspects of your app, or to browse categorized data sets.</p>
-
-
-<h2 id="scrollable">Scrollable Tabs</h2>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate
-to the next/previous view, swipe left or right.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <video width="400" class="with-shadow play-on-hover" autoplay>
-      <source src="../static/content/tabs_scrolly.mp4" type="video/mp4">
-      <source src="../static/content/tabs_scrolly.webm" type="video/webm">
-      <source src="../static/content/tabs_scrolly.ogv" type="video/ogg">
-    </video>
-    <div class="figure-caption">
-      Scrolling tabs on Google Play.
-      <div class="video-instructions">&nbsp;</div>
-    </div>
-
-  </div>
-</div>
-
-
-<h2 id="fixed">Fixed Tabs</h2>
-
-
-<p>Fixed tabs display all items concurrently. To navigate to a different view, touch the tab.</p>
-
-<img src="../static/content/tabs_standard.png">
-<div class="figure-caption">
-  Tabs in Holo Dark &amp; Light.
-</div>
-
-<img src="../static/content/tabs_youtube.png">
-<div class="figure-caption">
-  Tabs in the YouTube app.
-</div>
-
-
-
-<h2 id="stacked">Stacked Tabs</h2>
-
-
-<p>If view navigation is essential to your app, you can break out tabs into a separate action bar. This
-permits fast view switching even on narrower screens.</p>
-
-<img src="../static/content/tabs_stacked.png">
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd
new file mode 100644
index 0000000..2c854d3
--- /dev/null
+++ b/docs/html/design/building-blocks/tabs.jd
@@ -0,0 +1,59 @@
+page.title=Tabs
+@jd:body
+
+<img src="{@docRoot}design/media/tabs_overview.png">
+
+<p>Tabs in the action bar make it easy to explore and switch between different views or functional
+aspects of your app, or to browse categorized data sets.</p>
+
+
+<h2 id="scrollable">Scrollable Tabs</h2>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate
+to the next/previous view, swipe left or right.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <video width="400" class="with-shadow play-on-hover" autoplay>
+      <source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4">
+      <source src="{@docRoot}design/media/tabs_scrolly.webm" type="video/webm">
+      <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg">
+    </video>
+    <div class="figure-caption">
+      Scrolling tabs in Google Play.
+      <div class="video-instructions">&nbsp;</div>
+    </div>
+
+  </div>
+</div>
+
+
+<h2 id="fixed">Fixed Tabs</h2>
+
+
+<p>Fixed tabs display all items concurrently. To navigate to a different view, touch the tab.</p>
+
+<img src="{@docRoot}design/media/tabs_standard.png">
+<div class="figure-caption">
+  Tabs in Holo Dark &amp; Light.
+</div>
+
+<img src="{@docRoot}design/media/tabs_youtube.png">
+<div class="figure-caption">
+  Tabs in the YouTube app.
+</div>
+
+
+
+<h2 id="stacked">Stacked Tabs</h2>
+
+
+<p>If view navigation is essential to your app, you can break out tabs into a separate action bar. This
+permits fast view switching even on narrower screens.</p>
+
+<img src="{@docRoot}design/media/tabs_stacked.png">
diff --git a/docs/html/design/building-blocks/text-fields.html b/docs/html/design/building-blocks/text-fields.html
deleted file mode 100644
index b9ec42d..0000000
--- a/docs/html/design/building-blocks/text-fields.html
+++ /dev/null
@@ -1,227 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Text Fields
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Text Fields</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Text fields allow the user to type text into your app. They can be either single line or multi-line.
-Touching a text field places the cursor and automatically displays the keyboard. In addition to
-typing, text fields allow for a variety of other activities, such as text selection (cut, copy,
-paste) and data lookup via auto-completion.</p>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-12">
-
-    <img src="../static/content/text_input_singlevsmultiline.png">
-
-  </div>
-</div>
-
-<h4>Single line and multi line</h4>
-<p>Single-line fields automatically scroll their content to the left as the text input cursor reaches
-the right edge of the input field. Multi-line text fields automatically break to a new line for
-overflow text and scroll vertically when the cursor reaches the lower edge.</p>
-
-<img src="../static/content/text_input_typesandtypedown.png">
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>Text field types</h4>
-<p>Text fields can have different types, such as number, message, or email address. The type determines
-what kind of characters are allowed inside the field, and may prompt the virtual keyboard to
-optimize its layout for frequently used characters.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<h4>Auto-complete text fields</h4>
-<p>Use auto-complete text fields to present real-time completions or search results in popups, so users
-can enter information more accurately and efficiently.</p>
-
-  </div>
-</div>
-
-<h2 id="text-selection">Text Selection</h2>
-
-<p>Users can select any word in a text field with a long press. This action triggers a text selection
-mode that facilitates extending the selection or choosing an action to perform on the selected text.
-Selection mode includes:</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/text_input_textselection.png">
-
-  </div>
-  <div class="layout-content-col span-4 with-callouts">
-
-<ol>
-<li>
-<h4>Contextual action bar</h4>
-<p>A contextual action bar (CAB) displays the actions available to perform on the selection:
- typically cut, copy, and paste, but apps can insert additional commands as needed.</p>
-</li>
-<li>
-<h4>Selection handles</h4>
-<p>Selection handles can be dragged to select more or less text while remaining in selection mode.</p>
-</li>
-</ol>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/building-blocks/text-fields.jd b/docs/html/design/building-blocks/text-fields.jd
new file mode 100644
index 0000000..1b10420
--- /dev/null
+++ b/docs/html/design/building-blocks/text-fields.jd
@@ -0,0 +1,70 @@
+page.title=Text Fields
+@jd:body
+
+<p>Text fields allow the user to type text into your app. They can be either single line or multi-line.
+Touching a text field places the cursor and automatically displays the keyboard. In addition to
+typing, text fields allow for a variety of other activities, such as text selection (cut, copy,
+paste) and data lookup via auto-completion.</p>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-12">
+
+    <img src="{@docRoot}design/media/text_input_singlevsmultiline.png">
+
+  </div>
+</div>
+
+<h4>Single line and multi line</h4>
+<p>Single-line fields automatically scroll their content to the left as the text input cursor reaches
+the right edge of the input field. Multi-line text fields automatically break to a new line for
+overflow text and scroll vertically when the cursor reaches the lower edge.</p>
+
+<img src="{@docRoot}design/media/text_input_typesandtypedown.png">
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>Text field types</h4>
+<p>Text fields can have different types, such as number, message, or email address. The type determines
+what kind of characters are allowed inside the field, and may prompt the virtual keyboard to
+optimize its layout for frequently used characters.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<h4>Auto-complete text fields</h4>
+<p>Use auto-complete text fields to present real-time completions or search results in popups, so users
+can enter information more accurately and efficiently.</p>
+
+  </div>
+</div>
+
+<h2 id="text-selection">Text Selection</h2>
+
+<p>Users can select any word in a text field with a long press. This action triggers a text selection
+mode that facilitates extending the selection or choosing an action to perform on the selected text.
+Selection mode includes:</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/text_input_textselection.png">
+
+  </div>
+  <div class="layout-content-col span-4 with-callouts">
+
+<ol>
+<li>
+<h4>Contextual action bar</h4>
+<p>A contextual action bar (CAB) displays the actions available to perform on the selection:
+ typically cut, copy, and paste, but apps can insert additional commands as needed.</p>
+</li>
+<li>
+<h4>Selection handles</h4>
+<p>Selection handles can be dragged to select more or less text while remaining in selection mode.</p>
+</li>
+</ol>
+
+  </div>
+</div>
diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs
new file mode 100644
index 0000000..19b58d9
--- /dev/null
+++ b/docs/html/design/design_toc.cs
@@ -0,0 +1,69 @@
+<ul id="nav">
+
+  <li class="nav-section">
+    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/index.html">Get Started</a></div>
+    <ul>
+      <li><a href="<?cs var:toroot ?>design/get-started/creative-vision.html">Creative Vision</a></li>
+      <li><a href="<?cs var:toroot ?>design/get-started/principles.html">Design Principles</a></li>
+      <li><a href="<?cs var:toroot ?>design/get-started/ui-overview.html">UI Overview</a></li>
+    </ul>
+  </li>
+
+  <li class="nav-section">
+    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/style/index.html">Style</a></div>
+    <ul>
+      <li><a href="<?cs var:toroot ?>design/style/devices-displays.html">Devices and Displays</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/themes.html">Themes</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/touch-feedback.html">Touch Feedback</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/metrics-grids.html">Metrics and Grids</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/typography.html">Typography</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/color.html">Color</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/iconography.html">Iconography</a></li>
+      <li><a href="<?cs var:toroot ?>design/style/writing.html">Writing Style</a></li>
+    </ul>
+  </li>
+
+  <li class="nav-section">
+    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></div>
+    <ul>
+      <li><a href="<?cs var:toroot ?>design/patterns/new-4-0.html">New in Android 4.0</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/gestures.html">Gestures</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/app-structure.html">App Structure</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/navigation.html">Navigation</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/actionbar.html">Action Bar</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li>
+    </ul>
+  </li>
+
+  <li class="nav-section">
+    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/building-blocks/index.html">Building Blocks</a></div>
+    <ul>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/tabs.html">Tabs</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/lists.html">Lists</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/grid-lists.html">Grid Lists</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/scrolling.html">Scrolling</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/spinners.html">Spinners</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/buttons.html">Buttons</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/text-fields.html">Text Fields</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/seek-bars.html">Seek Bars</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/progress.html">Progress &amp; Activity</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/switches.html">Switches</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/dialogs.html">Dialogs</a></li>
+      <li><a href="<?cs var:toroot ?>design/building-blocks/pickers.html">Pickers</a></li>
+    </ul>
+  </li>
+
+  <li class="nav-section">
+    <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></div>
+  </li>
+
+  <li>
+    <div id="back-dac-section"><a href="<?cs var:toroot ?>index.html">Developers</a></div>
+  </li>
+
+</ul>
\ No newline at end of file
diff --git a/docs/html/design/downloads/index.html b/docs/html/design/downloads/index.html
deleted file mode 100644
index f910b29..0000000
--- a/docs/html/design/downloads/index.html
+++ /dev/null
@@ -1,278 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Downloads
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Downloads</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-9">
-
-<p>Want everything? We've bundled all the downloads available on Android Design into a single ZIP file.
-You can also download individual files listed below.</p>
-<p>You may use these materials without restriction in your apps and to develop your apps.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<p>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Downloads_20120229.zip">Download All</a>
-</p>
-
-  </div>
-</div>
-
-<h2 id="stencils">Stencils and Sources</h2>
-
-<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
-phone and tablet outlines to frame your creations. Source files for icons and controls are also
-available.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/downloads_stencils.png">
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<p>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Fireworks_Stencil_20120229.png">Adobe&reg; Fireworks&reg; PNG Stencil</a>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_OmniGraffle_Stencil_20120229.graffle">Omni&reg; OmniGraffle&reg; Stencil</a>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120229.zip">Adobe&reg; Photoshop&reg; Sources</a>
-</p>
-
-  </div>
-</div>
-
-<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<p>Action bar icons are graphic buttons that represent the most important actions people can take
-within your app. <a href="../style/iconography.html">More on Action Bar Iconography</a></p>
-<p>The download package includes icons that are scaled for various screen densities and suitable for
-use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can
-modify to match your theme, plus source files.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/iconography_actionbar_style.png">
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<p>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Action Bar Icon Pack</a>
-</p>
-
-  </div>
-</div>
-
-<h2 id="style">Style</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Roboto</h4>
-<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
-requirements of UI and high-resolution screens.</p>
-<p><a href="../style/typography.html#actionbar">More on Roboto</a></p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/downloads_roboto_specimen_preview.png">
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<p>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Roboto</a>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a>
-</p>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <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
-shade that can be used as a complement when needed.</p>
-<p><a href="../style/color.html">More on Color</a></p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/downloads_color_swatches.png">
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<p>
-  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a>
-</p>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd
new file mode 100644
index 0000000..618c44b
--- /dev/null
+++ b/docs/html/design/downloads/index.jd
@@ -0,0 +1,121 @@
+page.title=Downloads
+@jd:body
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-9">
+
+<p>Want everything? We've bundled all the downloads available on Android Design into a single ZIP file.
+You can also download individual files listed below.</p>
+<p>You may use these materials without restriction in your apps and to develop your apps.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<p>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Downloads_20120229.zip">Download All</a>
+</p>
+
+  </div>
+</div>
+
+<h2 id="stencils">Stencils and Sources</h2>
+
+<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
+phone and tablet outlines to frame your creations. Source files for icons and controls are also
+available.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/downloads_stencils.png">
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<p>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Fireworks_Stencil_20120229.png">Adobe&reg; Fireworks&reg; PNG Stencil</a>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_OmniGraffle_Stencil_20120229.graffle">Omni&reg; OmniGraffle&reg; Stencil</a>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120229.zip">Adobe&reg; Photoshop&reg; Sources</a>
+</p>
+
+  </div>
+</div>
+
+<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<p>Action bar icons are graphic buttons that represent the most important actions people can take
+within your app. <a href="{@docRoot}design/style/iconography.html">More on Action Bar Iconography</a></p>
+<p>The download package includes icons that are scaled for various screen densities and suitable for
+use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can
+modify to match your theme, plus source files.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/iconography_actionbar_style.png">
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<p>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Action Bar Icon Pack</a>
+</p>
+
+  </div>
+</div>
+
+<h2 id="style">Style</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Roboto</h4>
+<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
+requirements of UI and high-resolution screens.</p>
+<p><a href="{@docRoot}design/style/typography.html#actionbar">More on Roboto</a></p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png">
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<p>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Roboto</a>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a>
+</p>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <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
+shade that can be used as a complement when needed.</p>
+<p><a href="{@docRoot}design/style/color.html">More on Color</a></p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/downloads_color_swatches.png">
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<p>
+  <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a>
+</p>
+
+  </div>
+</div>
diff --git a/docs/html/design/get-started/creative-vision.html b/docs/html/design/get-started/creative-vision.html
deleted file mode 100644
index 154f8d0..0000000
--- a/docs/html/design/get-started/creative-vision.html
+++ /dev/null
@@ -1,205 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Creative Vision
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Creative Vision</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<img src="../static/content/creative_vision_main.png">
-
-<div class="vspace size-1">&nbsp;</div>
-
-<p>Ice Cream Sandwich (Android 4.0) marks a major milestone for Android design. We touched nearly every
-pixel of the system as we expanded the new design approaches introduced in Honeycomb tablets to all
-types of mobile devices. Starting with the most basic elements, we introduced a new font, Roboto,
-designed for high-resolution displays. Other big changes include framework-level action bars on
-phones and support for new phones without physical buttons.</p>
-<p>We focused the design work with three overarching goals for our core apps and the system at large.
-As you design apps to work with Android, consider these goals:</p>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-<h4>Enchant me</h4>
-<p>Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels.
-Transitions are fast and clear; layout and typography are crisp and meaningful. App icons are works
-of art in their own right. Just like a well-made tool, your app should strive to combine beauty,
-simplicity and purpose to create a magical experience that is effortless and powerful.</p>
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Simplify my life</h4>
-<p>Android apps make life easier and are easy to understand. When people use your app for the first
-time, they should intuitively grasp the most important features. The design work doesn't stop at the
-first use, though. Android apps remove ongoing chores like file management and syncing. Simple tasks
-never require complex procedures, and complex tasks are tailored to the human hand and mind. People
-of all ages and cultures feel firmly in control, and are never overwhelmed by too many choices or
-irrelevant flash.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<h4>Make me amazing</h4>
-<p>It's not enough to make an app that is easy to use. Android apps empower people to try new things
-and to use apps in inventive new ways. Android lets people combine applications into new workflows
-through multitasking, notifications, and sharing across apps. At the same time, your app should feel
-personal, giving people access to superb technology with clarity and grace.</p>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/get-started/creative-vision.jd b/docs/html/design/get-started/creative-vision.jd
new file mode 100644
index 0000000..792b97d
--- /dev/null
+++ b/docs/html/design/get-started/creative-vision.jd
@@ -0,0 +1,48 @@
+page.title=Creative Vision
+@jd:body
+
+<img src="{@docRoot}design/media/creative_vision_main.png">
+
+<div class="vspace size-1">&nbsp;</div>
+
+<p>Ice Cream Sandwich (Android 4.0) marks a major milestone for Android design. We touched nearly every
+pixel of the system as we expanded the new design approaches introduced in Honeycomb tablets to all
+types of mobile devices. Starting with the most basic elements, we introduced a new font, Roboto,
+designed for high-resolution displays. Other big changes include framework-level action bars on
+phones and support for new phones without physical buttons.</p>
+<p>We focused the design work with three overarching goals for our core apps and the system at large.
+As you design apps to work with Android, consider these goals:</p>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+<h4>Enchant me</h4>
+<p>Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels.
+Transitions are fast and clear; layout and typography are crisp and meaningful. App icons are works
+of art in their own right. Just like a well-made tool, your app should strive to combine beauty,
+simplicity and purpose to create a magical experience that is effortless and powerful.</p>
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Simplify my life</h4>
+<p>Android apps make life easier and are easy to understand. When people use your app for the first
+time, they should intuitively grasp the most important features. The design work doesn't stop at the
+first use, though. Android apps remove ongoing chores like file management and syncing. Simple tasks
+never require complex procedures, and complex tasks are tailored to the human hand and mind. People
+of all ages and cultures feel firmly in control, and are never overwhelmed by too many choices or
+irrelevant flash.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<h4>Make me amazing</h4>
+<p>It's not enough to make an app that is easy to use. Android apps empower people to try new things
+and to use apps in inventive new ways. Android lets people combine applications into new workflows
+through multitasking, notifications, and sharing across apps. At the same time, your app should feel
+personal, giving people access to superb technology with clarity and grace.</p>
+
+  </div>
+</div>
diff --git a/docs/html/design/get-started/principles.html b/docs/html/design/get-started/principles.html
deleted file mode 100644
index f10a90d..0000000
--- a/docs/html/design/get-started/principles.html
+++ /dev/null
@@ -1,457 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Design Principles
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Design Principles</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>These design principles were developed by and for the Android User Experience Team to keep users'
-best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate
-with purpose.</p>
-
-<h2 id="enchant-me">Enchant Me</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Delight me in surprising ways</h4>
-<p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to
-experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful
-force is at hand.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_delight.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Real objects are more fun than buttons and menus</h4>
-<p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort
-needed to perform a task while making it more emotionally satisfying.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_real_objects.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Let me make it mine</h4>
-<p>People love to add personal touches because it helps them feel at home and in control. Provide
-sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder
-primary tasks.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_make_it_mine.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Get to know me</h4>
-<p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and
-over, place previous choices within easy reach.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_get_to_know_me.png">
-
-  </div>
-</div>
-
-<h2 id="simplify-my-life">Simplify My Life</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Keep it brief</h4>
-<p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_keep_it_brief.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Pictures are faster than words</h4>
-<p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient
-than words.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_pictures.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Decide for me but let me have the final say</h4>
-<p>Take your best guess and act rather than asking first. Too many choices and decisions make people
-unhappy. Just in case you get it wrong, allow for 'undo'.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_decide_for_me.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Only show what I need when I need it</h4>
-<p>People get overwhelmed when they see too much at once. Break tasks and information into small,
-digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_information_when_need_it.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>I should always know where I am</h4>
-<p>Give people confidence that they know their way around. Make places in your app look distinct and
-use transitions to show relationships among screens. Provide feedback on tasks in progress.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_navigation.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Never lose my stuff</h4>
-<p>Save what people took time to create and let them access it from anywhere. Remember settings,
-personal touches, and creations across phones, tablets, and computers. It makes upgrading the
-easiest thing in the world.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_never_lose_stuff.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>If it looks the same, it should act the same</h4>
-<p>Help people discern functional differences by making them visually distinct rather than subtle.
-Avoid modes, which are places that look similar but act differently on the same input.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_looks_same.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Only interrupt me if it's important</h4>
-<p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay
-focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_important_interruption.png">
-
-  </div>
-</div>
-
-<h2 id="make-me-amazing">Make Me Amazing</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Give me tricks that work everywhere</h4>
-<p>People feel great when they figure things out for themselves. Make your app easier to learn by
-leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture
-may be a good navigational shortcut.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_tricks.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>It's not my fault</h4>
-<p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your
-app. If something goes wrong, give clear recovery instructions but spare them the technical details.
-If you can fix it behind the scenes, even better.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_error.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Sprinkle encouragement</h4>
-<p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions,
-even if it's just a subtle glow.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_sprinkle_encouragement.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Do the heavy lifting for me</h4>
-<p>Make novices feel like experts by enabling them to do things they never thought they could. For
-example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in
-only a few steps.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_heavy_lifting.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Make important things fast</h4>
-<p>Not all actions are equal. Decide what's most important in your app and make it easy to find and
-fast to use, like the shutter button in a camera, or the pause button in a music player.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/principles_make_important_fast.png">
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/get-started/principles.jd b/docs/html/design/get-started/principles.jd
new file mode 100644
index 0000000..8f5b446
--- /dev/null
+++ b/docs/html/design/get-started/principles.jd
@@ -0,0 +1,300 @@
+page.title=Design Principles
+@jd:body
+
+<p>These design principles were developed by and for the Android User Experience Team to keep users'
+best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate
+with purpose.</p>
+
+<h2 id="enchant-me">Enchant Me</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Delight me in surprising ways</h4>
+<p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to
+experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful
+force is at hand.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_delight.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Real objects are more fun than buttons and menus</h4>
+<p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort
+needed to perform a task while making it more emotionally satisfying.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_real_objects.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Let me make it mine</h4>
+<p>People love to add personal touches because it helps them feel at home and in control. Provide
+sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder
+primary tasks.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_make_it_mine.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Get to know me</h4>
+<p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and
+over, place previous choices within easy reach.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_get_to_know_me.png">
+
+  </div>
+</div>
+
+<h2 id="simplify-my-life">Simplify My Life</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Keep it brief</h4>
+<p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_keep_it_brief.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Pictures are faster than words</h4>
+<p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient
+than words.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_pictures.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Decide for me but let me have the final say</h4>
+<p>Take your best guess and act rather than asking first. Too many choices and decisions make people
+unhappy. Just in case you get it wrong, allow for 'undo'.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_decide_for_me.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Only show what I need when I need it</h4>
+<p>People get overwhelmed when they see too much at once. Break tasks and information into small,
+digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_information_when_need_it.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>I should always know where I am</h4>
+<p>Give people confidence that they know their way around. Make places in your app look distinct and
+use transitions to show relationships among screens. Provide feedback on tasks in progress.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_navigation.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Never lose my stuff</h4>
+<p>Save what people took time to create and let them access it from anywhere. Remember settings,
+personal touches, and creations across phones, tablets, and computers. It makes upgrading the
+easiest thing in the world.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_never_lose_stuff.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>If it looks the same, it should act the same</h4>
+<p>Help people discern functional differences by making them visually distinct rather than subtle.
+Avoid modes, which are places that look similar but act differently on the same input.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_looks_same.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Only interrupt me if it's important</h4>
+<p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay
+focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_important_interruption.png">
+
+  </div>
+</div>
+
+<h2 id="make-me-amazing">Make Me Amazing</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Give me tricks that work everywhere</h4>
+<p>People feel great when they figure things out for themselves. Make your app easier to learn by
+leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture
+may be a good navigational shortcut.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_tricks.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>It's not my fault</h4>
+<p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your
+app. If something goes wrong, give clear recovery instructions but spare them the technical details.
+If you can fix it behind the scenes, even better.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_error.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Sprinkle encouragement</h4>
+<p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions,
+even if it's just a subtle glow.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Do the heavy lifting for me</h4>
+<p>Make novices feel like experts by enabling them to do things they never thought they could. For
+example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in
+only a few steps.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_heavy_lifting.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Make important things fast</h4>
+<p>Not all actions are equal. Decide what's most important in your app and make it easy to find and
+fast to use, like the shutter button in a camera, or the pause button in a music player.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_make_important_fast.png">
+
+  </div>
+</div>
diff --git a/docs/html/design/get-started/ui-overview.html b/docs/html/design/get-started/ui-overview.html
deleted file mode 100644
index a4881d5..0000000
--- a/docs/html/design/get-started/ui-overview.html
+++ /dev/null
@@ -1,306 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - UI Overview
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>UI Overview</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Android's system UI provides the framework on top of which you build your app. Important aspects
-include the Home screen experience, global device navigation, and notifications.</p>
-<p>Your app will play an important part in keeping the overall Android experience consistent and
-enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal
-in your app.</p>
-<p>Read on for a quick overview of the most important aspects of the Android user interface.</p>
-
-<h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/ui_overview_home_screen.png">
-
-<h4>Home screen</h4>
-<p>Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between
-different home screen panels by swiping left and right.</p>
-<p>The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view
-regardless of which panel is currently showing.</p>
-<p>Access the entire collection of apps and widgets by touching the All Apps button at the center of
-the Favorites Tray.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/ui_overview_all_apps.png">
-
-<h4>All apps screen</h4>
-<p>The All Apps screen lets you browse the entire set of apps and widgets that are installed on your
-device.</p>
-<p>Users can drag an app or widget icon from the All Apps screen and place it in any empty location on
-any Home screen.</p>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/ui_overview_recents.png">
-
-<h4>Recents screen</h4>
-<p>Recents provides an efficient way of switching between recently used applications. It provides a
-clear navigation path between multiple ongoing tasks.</p>
-<p>The Recents button at the right side of the navigation bar displays the apps that the user has
-interacted with most recently. They are organized in reverse chronological order with the most
-recently used app at the bottom.</p>
-<p>Switch to an app by touching it. Remove an item by swiping left or right.</p>
-
-  </div>
-</div>
-
-<h2 id="system-bars">System Bars</h2>
-
-<p>The system bars are screen areas dedicated to the display of notifications, communication of device
-status, and device navigation. Typically the system bars are displayed concurrently with your app.
-Apps that display immersive content, such as movies or images, can temporarily hide the system bars
-to allow the user to enjoy full screen content without distraction.</p>
-
-<img src="../static/content/ui_overview_system_ui.png">
-
-<div class="with-callouts">
-
-<ol>
-<li>
-<h4>Status Bar</h4>
-<p>Displays pending notifications on the left and status, such as time, battery level, or signal
-  strength, on the right. Swipe down from the status bar to show notification details.</p>
-</li>
-<li>
-<h4>Navigation Bar</h4>
-<p>New for phones in Android 4.0, the navigation bar is present only on devices that don't have
-  the traditional hardware keys. It houses the device navigation controls Back, Home, and
-  Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p>
-</li>
-<li>
-<h4>Combined Bar</h4>
-<p>On tablet form factors the status and navigation bars are combined into a single bar at the
-  bottom of the screen.</p>
-</li>
-</ol>
-
-</div>
-
-<h2 id="notifications">Notifications</h2>
-
-<p>Notifications are brief messages that users can access at any time from the status bar. They
-provide updates, reminders, or information that's important, but not critical enough to warrant
-interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a
-notification opens the associated app. <a href="../patterns/notifications.html">More on Notifications</a></p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/ui_overview_notifications.png">
-
-  </div>
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/notifications_dismiss.png">
-
-<p>Most notifications have a one-line title and a one-line message. The recommended layout for a
-notification includes two lines. If necessary, you can add a third line. Timestamps are optional.</p>
-<p>Swiping a notification right or left removes it from the notification drawer.</p>
-
-  </div>
-</div>
-
-
-<h2 id="app">Common App UI</h2>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/ui_overview_app_ui.png">
-
-  </div>
-  <div class="layout-content-col span-6 with-callouts">
-
-<p>A typical Android app consists of action bars and the app content area.</p>
-<ol>
-<li>
-<h4>Main Action Bar</h4>
-<p>The command and control center for your app. The main action bar includes elements for
-  navigating your app's hierarchy and views, and also surfaces the most important actions.</p>
-<p><a href="../patterns/actionbar.html">More on the Action Bar</a></p>
-</li>
-<li>
-<h4>View Control</h4>
-<p>Allows users to switch between the different views that your app provides. Views typically
-  consist of different arrangements of your data or different functional aspects of your app.</p>
-</li>
-<li>
-<h4>Content Area</h4>
-<p>The space where the content of your app is displayed.</p>
-</li>
-<li>
-<h4>Split Action Bar</h4>
-<p>Split action bars provide a way to distribute actions across additional bars located below
-  the main action bar or at the bottom of the screen. In this example, a split action bar moves
-  important actions that won't fit in the main bar to the bottom.</p>
-</li>
-</ol>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/get-started/ui-overview.jd b/docs/html/design/get-started/ui-overview.jd
new file mode 100644
index 0000000..34cdd06
--- /dev/null
+++ b/docs/html/design/get-started/ui-overview.jd
@@ -0,0 +1,149 @@
+page.title=UI Overview
+@jd:body
+
+<p>Android's system UI provides the framework on top of which you build your app. Important aspects
+include the Home screen experience, global device navigation, and notifications.</p>
+<p>Your app will play an important part in keeping the overall Android experience consistent and
+enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal
+in your app.</p>
+<p>Read on for a quick overview of the most important aspects of the Android user interface.</p>
+
+<h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_home_screen.png">
+
+<h4>Home screen</h4>
+<p>Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between
+different home screen panels by swiping left and right.</p>
+<p>The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view
+regardless of which panel is currently showing.</p>
+<p>Access the entire collection of apps and widgets by touching the All Apps button at the center of
+the Favorites Tray.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_all_apps.png">
+
+<h4>All apps screen</h4>
+<p>The All Apps screen lets you browse the entire set of apps and widgets that are installed on your
+device.</p>
+<p>Users can drag an app or widget icon from the All Apps screen and place it in any empty location on
+any Home screen.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_recents.png">
+
+<h4>Recents screen</h4>
+<p>Recents provides an efficient way of switching between recently used applications. It provides a
+clear navigation path between multiple ongoing tasks.</p>
+<p>The Recents button at the right side of the navigation bar displays the apps that the user has
+interacted with most recently. They are organized in reverse chronological order with the most
+recently used app at the bottom.</p>
+<p>Switch to an app by touching it. Remove an item by swiping left or right.</p>
+
+  </div>
+</div>
+
+<h2 id="system-bars">System Bars</h2>
+
+<p>The system bars are screen areas dedicated to the display of notifications, communication of device
+status, and device navigation. Typically the system bars are displayed concurrently with your app.
+Apps that display immersive content, such as movies or images, can temporarily hide the system bars
+to allow the user to enjoy full screen content without distraction.</p>
+
+<img src="{@docRoot}design/media/ui_overview_system_ui.png">
+
+<div class="with-callouts">
+
+<ol>
+<li>
+<h4>Status Bar</h4>
+<p>Displays pending notifications on the left and status, such as time, battery level, or signal
+  strength, on the right. Swipe down from the status bar to show notification details.</p>
+</li>
+<li>
+<h4>Navigation Bar</h4>
+<p>New for phones in Android 4.0, the navigation bar is present only on devices that don't have
+  the traditional hardware keys. It houses the device navigation controls Back, Home, and
+  Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p>
+</li>
+<li>
+<h4>Combined Bar</h4>
+<p>On tablet form factors the status and navigation bars are combined into a single bar at the
+  bottom of the screen.</p>
+</li>
+</ol>
+
+</div>
+
+<h2 id="notifications">Notifications</h2>
+
+<p>Notifications are brief messages that users can access at any time from the status bar. They
+provide updates, reminders, or information that's important, but not critical enough to warrant
+interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a
+notification opens the associated app. <a href="{@docRoot}design/patterns/notifications.html">More on Notifications</a></p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_notifications.png">
+
+  </div>
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/notifications_dismiss.png">
+
+<p>Most notifications have a one-line title and a one-line message. The recommended layout for a
+notification includes two lines. If necessary, you can add a third line. Timestamps are optional.</p>
+<p>Swiping a notification right or left removes it from the notification drawer.</p>
+
+  </div>
+</div>
+
+
+<h2 id="app">Common App UI</h2>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/ui_overview_app_ui.png">
+
+  </div>
+  <div class="layout-content-col span-6 with-callouts">
+
+<p>A typical Android app consists of action bars and the app content area.</p>
+<ol>
+<li>
+<h4>Main Action Bar</h4>
+<p>The command and control center for your app. The main action bar includes elements for
+  navigating your app's hierarchy and views, and also surfaces the most important actions.</p>
+<p><a href="{@docRoot}design/patterns/actionbar.html">More on the Action Bar</a></p>
+</li>
+<li>
+<h4>View Control</h4>
+<p>Allows users to switch between the different views that your app provides. Views typically
+  consist of different arrangements of your data or different functional aspects of your app.</p>
+</li>
+<li>
+<h4>Content Area</h4>
+<p>The space where the content of your app is displayed.</p>
+</li>
+<li>
+<h4>Split Action Bar</h4>
+<p>Split action bars provide a way to distribute actions across additional bars located below
+  the main action bar or at the bottom of the screen. In this example, a split action bar moves
+  important actions that won't fit in the main bar to the bottom.</p>
+</li>
+</ol>
+
+  </div>
+</div>
diff --git a/docs/html/design/index.html b/docs/html/design/index.html
deleted file mode 100644
index 8583aa4..0000000
--- a/docs/html/design/index.html
+++ /dev/null
@@ -1,168 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Welcome
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="static/default.css">
-
-<style>
-#landing-graphic-container {
-  position: relative;
-}
-
-#text-overlay {
-  position: absolute;
-  left: 10px;
-  top: 472px;
-  width: 280px;
-}
-</style>
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="index.html">Get Started</a></div>
-            <ul>
-              <li><a href="get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="get-started/principles.html">Design Principles</a></li>
-              <li><a href="get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="style/index.html">Style</a></div>
-            <ul>
-              <li><a href="style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="style/themes.html">Themes</a></li>
-              <li><a href="style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="style/typography.html">Typography</a></li>
-              <li><a href="style/color.html">Color</a></li>
-              <li><a href="style/iconography.html">Iconography</a></li>
-              <li><a href="style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="patterns/gestures.html">Gestures</a></li>
-              <li><a href="patterns/app-structure.html">App Structure</a></li>
-              <li><a href="patterns/navigation.html">Navigation</a></li>
-              <li><a href="patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="patterns/selection.html">Selection</a></li>
-              <li><a href="patterns/notifications.html">Notifications</a></li>
-              <li><a href="patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="building-blocks/lists.html">Lists</a></li>
-              <li><a href="building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="building-blocks/switches.html">Switches</a></li>
-              <li><a href="building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-
-
-          
-
-<div id="landing-graphic-container">
-  <div id="text-overlay">
-    Welcome to <strong>Android Design</strong>, your place for learning how to design exceptional Android apps.
-    <br><br>
-    <a href="get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
-  </div>
-
-  <a href="get-started/creative-vision.html">
-    <img src="static/content/index_landing_page.png">
-  </a>
-</div>
-
-
-
-          
-
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '';
-    </script>
-    <script src="static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd
new file mode 100644
index 0000000..d404aa6
--- /dev/null
+++ b/docs/html/design/index.jd
@@ -0,0 +1,29 @@
+page.title=
+header.hide=1
+footer.hide=1
+@jd:body
+
+<style>
+#landing-graphic-container {
+  position: relative;
+}
+
+#text-overlay {
+  position: absolute;
+  left: 10px;
+  top: 472px;
+  width: 280px;
+}
+</style>
+
+<div id="landing-graphic-container">
+  <div id="text-overlay">
+    Welcome to <strong>Android Design</strong>, your place for learning how to design exceptional Android apps.
+    <br><br>
+    <a href="{@docRoot}design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
+  </div>
+
+  <a href="{@docRoot}design/get-started/creative-vision.html">
+    <img src="{@docRoot}design/media/index_landing_page.png">
+  </a>
+</div>
diff --git a/docs/html/design/static/content/action_bar_basics.png b/docs/html/design/media/action_bar_basics.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_basics.png
rename to docs/html/design/media/action_bar_basics.png
Binary files differ
diff --git a/docs/html/design/static/content/action_bar_cab.png b/docs/html/design/media/action_bar_cab.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_cab.png
rename to docs/html/design/media/action_bar_cab.png
Binary files differ
diff --git a/docs/html/design/static/content/action_bar_pattern_action_icons.png b/docs/html/design/media/action_bar_pattern_action_icons.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_pattern_action_icons.png
rename to docs/html/design/media/action_bar_pattern_action_icons.png
Binary files differ
diff --git a/docs/html/design/static/content/action_bar_pattern_considerations.png b/docs/html/design/media/action_bar_pattern_considerations.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_pattern_considerations.png
rename to docs/html/design/media/action_bar_pattern_considerations.png
Binary files differ
diff --git a/docs/html/design/static/content/action_bar_pattern_default_tabs.png b/docs/html/design/media/action_bar_pattern_default_tabs.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_pattern_default_tabs.png
rename to docs/html/design/media/action_bar_pattern_default_tabs.png
Binary files differ
diff --git a/docs/html/design/static/content/action_bar_pattern_overflow.png b/docs/html/design/media/action_bar_pattern_overflow.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_pattern_overflow.png
rename to docs/html/design/media/action_bar_pattern_overflow.png
Binary files differ
diff --git a/docs/html/design/static/content/action_bar_pattern_overview.png b/docs/html/design/media/action_bar_pattern_overview.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_pattern_overview.png
rename to docs/html/design/media/action_bar_pattern_overview.png
Binary files differ
diff --git a/docs/html/design/static/content/action_bar_pattern_rotation.png b/docs/html/design/media/action_bar_pattern_rotation.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_pattern_rotation.png
rename to docs/html/design/media/action_bar_pattern_rotation.png
Binary files differ
diff --git a/docs/html/design/static/content/action_bar_pattern_share_pack.png b/docs/html/design/media/action_bar_pattern_share_pack.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_pattern_share_pack.png
rename to docs/html/design/media/action_bar_pattern_share_pack.png
Binary files differ
diff --git a/docs/html/design/static/content/action_bar_pattern_spinner.png b/docs/html/design/media/action_bar_pattern_spinner.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_pattern_spinner.png
rename to docs/html/design/media/action_bar_pattern_spinner.png
Binary files differ
diff --git a/docs/html/design/static/content/action_bar_pattern_table.png b/docs/html/design/media/action_bar_pattern_table.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_pattern_table.png
rename to docs/html/design/media/action_bar_pattern_table.png
Binary files differ
diff --git a/docs/html/design/static/content/action_bar_pattern_up_app_icon.png b/docs/html/design/media/action_bar_pattern_up_app_icon.png
similarity index 100%
rename from docs/html/design/static/content/action_bar_pattern_up_app_icon.png
rename to docs/html/design/media/action_bar_pattern_up_app_icon.png
Binary files differ
diff --git a/docs/html/design/static/content/app_structure_book_detail_page_flip.png b/docs/html/design/media/app_structure_book_detail_page_flip.png
similarity index 100%
rename from docs/html/design/static/content/app_structure_book_detail_page_flip.png
rename to docs/html/design/media/app_structure_book_detail_page_flip.png
Binary files differ
diff --git a/docs/html/design/static/content/app_structure_fixedtabs.png b/docs/html/design/media/app_structure_fixedtabs.png
similarity index 100%
rename from docs/html/design/static/content/app_structure_fixedtabs.png
rename to docs/html/design/media/app_structure_fixedtabs.png
Binary files differ
diff --git a/docs/html/design/static/content/app_structure_gallery_filmstrip.png b/docs/html/design/media/app_structure_gallery_filmstrip.png
similarity index 100%
rename from docs/html/design/static/content/app_structure_gallery_filmstrip.png
rename to docs/html/design/media/app_structure_gallery_filmstrip.png
Binary files differ
diff --git a/docs/html/design/static/content/app_structure_gmail.png b/docs/html/design/media/app_structure_gmail.png
similarity index 100%
rename from docs/html/design/static/content/app_structure_gmail.png
rename to docs/html/design/media/app_structure_gmail.png
Binary files differ
diff --git a/docs/html/design/static/content/app_structure_gmail_swipe.png b/docs/html/design/media/app_structure_gmail_swipe.png
similarity index 100%
rename from docs/html/design/static/content/app_structure_gmail_swipe.png
rename to docs/html/design/media/app_structure_gmail_swipe.png
Binary files differ
diff --git a/docs/html/design/static/content/app_structure_market.png b/docs/html/design/media/app_structure_market.png
similarity index 100%
rename from docs/html/design/static/content/app_structure_market.png
rename to docs/html/design/media/app_structure_market.png
Binary files differ
diff --git a/docs/html/design/static/content/app_structure_music_lndscp.png b/docs/html/design/media/app_structure_music_lndscp.png
similarity index 100%
rename from docs/html/design/static/content/app_structure_music_lndscp.png
rename to docs/html/design/media/app_structure_music_lndscp.png
Binary files differ
diff --git a/docs/html/design/static/content/app_structure_overview.png b/docs/html/design/media/app_structure_overview.png
similarity index 100%
rename from docs/html/design/static/content/app_structure_overview.png
rename to docs/html/design/media/app_structure_overview.png
Binary files differ
diff --git a/docs/html/design/static/content/app_structure_people_detail.png b/docs/html/design/media/app_structure_people_detail.png
similarity index 100%
rename from docs/html/design/static/content/app_structure_people_detail.png
rename to docs/html/design/media/app_structure_people_detail.png
Binary files differ
diff --git a/docs/html/design/static/content/app_structure_scrolltabs.png b/docs/html/design/media/app_structure_scrolltabs.png
similarity index 100%
rename from docs/html/design/static/content/app_structure_scrolltabs.png
rename to docs/html/design/media/app_structure_scrolltabs.png
Binary files differ
diff --git a/docs/html/design/static/content/app_structure_shortcut_on_item.png b/docs/html/design/media/app_structure_shortcut_on_item.png
similarity index 100%
rename from docs/html/design/static/content/app_structure_shortcut_on_item.png
rename to docs/html/design/media/app_structure_shortcut_on_item.png
Binary files differ
diff --git a/docs/html/design/static/content/building_blocks_landing.png b/docs/html/design/media/building_blocks_landing.png
similarity index 100%
rename from docs/html/design/static/content/building_blocks_landing.png
rename to docs/html/design/media/building_blocks_landing.png
Binary files differ
diff --git a/docs/html/design/static/content/buttons_basic.png b/docs/html/design/media/buttons_basic.png
similarity index 100%
rename from docs/html/design/static/content/buttons_basic.png
rename to docs/html/design/media/buttons_basic.png
Binary files differ
diff --git a/docs/html/design/static/content/buttons_borderless.png b/docs/html/design/media/buttons_borderless.png
similarity index 100%
rename from docs/html/design/static/content/buttons_borderless.png
rename to docs/html/design/media/buttons_borderless.png
Binary files differ
diff --git a/docs/html/design/static/content/buttons_default_small.png b/docs/html/design/media/buttons_default_small.png
similarity index 100%
rename from docs/html/design/static/content/buttons_default_small.png
rename to docs/html/design/media/buttons_default_small.png
Binary files differ
diff --git a/docs/html/design/static/content/color_spectrum.png b/docs/html/design/media/color_spectrum.png
similarity index 100%
rename from docs/html/design/static/content/color_spectrum.png
rename to docs/html/design/media/color_spectrum.png
Binary files differ
diff --git a/docs/html/design/static/content/compatibility_legacy_apps.png b/docs/html/design/media/compatibility_legacy_apps.png
similarity index 100%
rename from docs/html/design/static/content/compatibility_legacy_apps.png
rename to docs/html/design/media/compatibility_legacy_apps.png
Binary files differ
diff --git a/docs/html/design/static/content/compatibility_physical_buttons.png b/docs/html/design/media/compatibility_physical_buttons.png
similarity index 100%
rename from docs/html/design/static/content/compatibility_physical_buttons.png
rename to docs/html/design/media/compatibility_physical_buttons.png
Binary files differ
diff --git a/docs/html/design/static/content/compatibility_virtual_nav.png b/docs/html/design/media/compatibility_virtual_nav.png
similarity index 100%
rename from docs/html/design/static/content/compatibility_virtual_nav.png
rename to docs/html/design/media/compatibility_virtual_nav.png
Binary files differ
diff --git a/docs/html/design/static/content/creative_vision_main.png b/docs/html/design/media/creative_vision_main.png
similarity index 100%
rename from docs/html/design/static/content/creative_vision_main.png
rename to docs/html/design/media/creative_vision_main.png
Binary files differ
diff --git a/docs/html/design/static/content/design_elements_landing.png b/docs/html/design/media/design_elements_landing.png
similarity index 100%
rename from docs/html/design/static/content/design_elements_landing.png
rename to docs/html/design/media/design_elements_landing.png
Binary files differ
diff --git a/docs/html/design/static/content/devices_displays_density.png b/docs/html/design/media/devices_displays_density.png
similarity index 100%
rename from docs/html/design/static/content/devices_displays_density.png
rename to docs/html/design/media/devices_displays_density.png
Binary files differ
diff --git a/docs/html/design/static/content/devices_displays_main.png b/docs/html/design/media/devices_displays_main.png
similarity index 100%
rename from docs/html/design/static/content/devices_displays_main.png
rename to docs/html/design/media/devices_displays_main.png
Binary files differ
diff --git a/docs/html/design/static/content/dialogs_examples.png b/docs/html/design/media/dialogs_examples.png
similarity index 100%
rename from docs/html/design/static/content/dialogs_examples.png
rename to docs/html/design/media/dialogs_examples.png
Binary files differ
diff --git a/docs/html/design/static/content/dialogs_main.png b/docs/html/design/media/dialogs_main.png
similarity index 100%
rename from docs/html/design/static/content/dialogs_main.png
rename to docs/html/design/media/dialogs_main.png
Binary files differ
diff --git a/docs/html/design/static/content/dialogs_popups_example.png b/docs/html/design/media/dialogs_popups_example.png
similarity index 100%
rename from docs/html/design/static/content/dialogs_popups_example.png
rename to docs/html/design/media/dialogs_popups_example.png
Binary files differ
diff --git a/docs/html/design/static/content/dialogs_toasts.png b/docs/html/design/media/dialogs_toasts.png
similarity index 100%
rename from docs/html/design/static/content/dialogs_toasts.png
rename to docs/html/design/media/dialogs_toasts.png
Binary files differ
diff --git a/docs/html/design/static/content/dialogs_w_no_title.png b/docs/html/design/media/dialogs_w_no_title.png
similarity index 100%
rename from docs/html/design/static/content/dialogs_w_no_title.png
rename to docs/html/design/media/dialogs_w_no_title.png
Binary files differ
diff --git a/docs/html/design/static/content/dialogs_w_title.png b/docs/html/design/media/dialogs_w_title.png
similarity index 100%
rename from docs/html/design/static/content/dialogs_w_title.png
rename to docs/html/design/media/dialogs_w_title.png
Binary files differ
diff --git a/docs/html/design/static/content/downloads_color_swatches.png b/docs/html/design/media/downloads_color_swatches.png
similarity index 100%
rename from docs/html/design/static/content/downloads_color_swatches.png
rename to docs/html/design/media/downloads_color_swatches.png
Binary files differ
diff --git a/docs/html/design/static/content/downloads_roboto_specimen_preview.png b/docs/html/design/media/downloads_roboto_specimen_preview.png
similarity index 100%
rename from docs/html/design/static/content/downloads_roboto_specimen_preview.png
rename to docs/html/design/media/downloads_roboto_specimen_preview.png
Binary files differ
diff --git a/docs/html/design/static/content/downloads_stencils.png b/docs/html/design/media/downloads_stencils.png
similarity index 100%
rename from docs/html/design/static/content/downloads_stencils.png
rename to docs/html/design/media/downloads_stencils.png
Binary files differ
diff --git a/docs/html/design/static/content/gesture_doubletouch.png b/docs/html/design/media/gesture_doubletouch.png
similarity index 100%
rename from docs/html/design/static/content/gesture_doubletouch.png
rename to docs/html/design/media/gesture_doubletouch.png
Binary files differ
diff --git a/docs/html/design/static/content/gesture_drag.png b/docs/html/design/media/gesture_drag.png
similarity index 100%
rename from docs/html/design/static/content/gesture_drag.png
rename to docs/html/design/media/gesture_drag.png
Binary files differ
diff --git a/docs/html/design/static/content/gesture_longtouch.png b/docs/html/design/media/gesture_longtouch.png
similarity index 100%
rename from docs/html/design/static/content/gesture_longtouch.png
rename to docs/html/design/media/gesture_longtouch.png
Binary files differ
diff --git a/docs/html/design/static/content/gesture_pinchclose.png b/docs/html/design/media/gesture_pinchclose.png
similarity index 100%
rename from docs/html/design/static/content/gesture_pinchclose.png
rename to docs/html/design/media/gesture_pinchclose.png
Binary files differ
diff --git a/docs/html/design/static/content/gesture_pinchopen.png b/docs/html/design/media/gesture_pinchopen.png
similarity index 100%
rename from docs/html/design/static/content/gesture_pinchopen.png
rename to docs/html/design/media/gesture_pinchopen.png
Binary files differ
diff --git a/docs/html/design/static/content/gesture_swipe.png b/docs/html/design/media/gesture_swipe.png
similarity index 100%
rename from docs/html/design/static/content/gesture_swipe.png
rename to docs/html/design/media/gesture_swipe.png
Binary files differ
diff --git a/docs/html/design/static/content/gesture_touch.png b/docs/html/design/media/gesture_touch.png
similarity index 100%
rename from docs/html/design/static/content/gesture_touch.png
rename to docs/html/design/media/gesture_touch.png
Binary files differ
diff --git a/docs/html/design/static/content/gridview_example.png b/docs/html/design/media/gridview_example.png
similarity index 100%
rename from docs/html/design/static/content/gridview_example.png
rename to docs/html/design/media/gridview_example.png
Binary files differ
diff --git a/docs/html/design/static/content/gridview_horizontal.png b/docs/html/design/media/gridview_horizontal.png
similarity index 100%
rename from docs/html/design/static/content/gridview_horizontal.png
rename to docs/html/design/media/gridview_horizontal.png
Binary files differ
diff --git a/docs/html/design/static/content/gridview_overview.png b/docs/html/design/media/gridview_overview.png
similarity index 100%
rename from docs/html/design/static/content/gridview_overview.png
rename to docs/html/design/media/gridview_overview.png
Binary files differ
diff --git a/docs/html/design/static/content/gridview_style.png b/docs/html/design/media/gridview_style.png
similarity index 100%
rename from docs/html/design/static/content/gridview_style.png
rename to docs/html/design/media/gridview_style.png
Binary files differ
diff --git a/docs/html/design/static/content/gridview_vertical.png b/docs/html/design/media/gridview_vertical.png
similarity index 100%
rename from docs/html/design/static/content/gridview_vertical.png
rename to docs/html/design/media/gridview_vertical.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_actionbar_colors.png b/docs/html/design/media/iconography_actionbar_colors.png
similarity index 100%
rename from docs/html/design/static/content/iconography_actionbar_colors.png
rename to docs/html/design/media/iconography_actionbar_colors.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_actionbar_focal.png b/docs/html/design/media/iconography_actionbar_focal.png
similarity index 100%
rename from docs/html/design/static/content/iconography_actionbar_focal.png
rename to docs/html/design/media/iconography_actionbar_focal.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_actionbar_size.png b/docs/html/design/media/iconography_actionbar_size.png
similarity index 100%
rename from docs/html/design/static/content/iconography_actionbar_size.png
rename to docs/html/design/media/iconography_actionbar_size.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_actionbar_style.png b/docs/html/design/media/iconography_actionbar_style.png
similarity index 100%
rename from docs/html/design/static/content/iconography_actionbar_style.png
rename to docs/html/design/media/iconography_actionbar_style.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_launcher_example.png b/docs/html/design/media/iconography_launcher_example.png
similarity index 100%
rename from docs/html/design/static/content/iconography_launcher_example.png
rename to docs/html/design/media/iconography_launcher_example.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_launcher_example2.png b/docs/html/design/media/iconography_launcher_example2.png
similarity index 100%
rename from docs/html/design/static/content/iconography_launcher_example2.png
rename to docs/html/design/media/iconography_launcher_example2.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_launcher_focal.png b/docs/html/design/media/iconography_launcher_focal.png
similarity index 100%
rename from docs/html/design/static/content/iconography_launcher_focal.png
rename to docs/html/design/media/iconography_launcher_focal.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_launcher_size.png b/docs/html/design/media/iconography_launcher_size.png
similarity index 100%
rename from docs/html/design/static/content/iconography_launcher_size.png
rename to docs/html/design/media/iconography_launcher_size.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_launcher_style.png b/docs/html/design/media/iconography_launcher_style.png
similarity index 100%
rename from docs/html/design/static/content/iconography_launcher_style.png
rename to docs/html/design/media/iconography_launcher_style.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_notification_example.png b/docs/html/design/media/iconography_notification_example.png
similarity index 100%
rename from docs/html/design/static/content/iconography_notification_example.png
rename to docs/html/design/media/iconography_notification_example.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_notification_focal.png b/docs/html/design/media/iconography_notification_focal.png
similarity index 100%
rename from docs/html/design/static/content/iconography_notification_focal.png
rename to docs/html/design/media/iconography_notification_focal.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_notification_size.png b/docs/html/design/media/iconography_notification_size.png
similarity index 100%
rename from docs/html/design/static/content/iconography_notification_size.png
rename to docs/html/design/media/iconography_notification_size.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_notification_style.png b/docs/html/design/media/iconography_notification_style.png
similarity index 100%
rename from docs/html/design/static/content/iconography_notification_style.png
rename to docs/html/design/media/iconography_notification_style.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_overview.png b/docs/html/design/media/iconography_overview.png
similarity index 100%
rename from docs/html/design/static/content/iconography_overview.png
rename to docs/html/design/media/iconography_overview.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_small_colors.png b/docs/html/design/media/iconography_small_colors.png
similarity index 100%
rename from docs/html/design/static/content/iconography_small_colors.png
rename to docs/html/design/media/iconography_small_colors.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_small_example.png b/docs/html/design/media/iconography_small_example.png
similarity index 100%
rename from docs/html/design/static/content/iconography_small_example.png
rename to docs/html/design/media/iconography_small_example.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_small_focal.png b/docs/html/design/media/iconography_small_focal.png
similarity index 100%
rename from docs/html/design/static/content/iconography_small_focal.png
rename to docs/html/design/media/iconography_small_focal.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_small_size.png b/docs/html/design/media/iconography_small_size.png
similarity index 100%
rename from docs/html/design/static/content/iconography_small_size.png
rename to docs/html/design/media/iconography_small_size.png
Binary files differ
diff --git a/docs/html/design/static/content/iconography_small_style.png b/docs/html/design/media/iconography_small_style.png
similarity index 100%
rename from docs/html/design/static/content/iconography_small_style.png
rename to docs/html/design/media/iconography_small_style.png
Binary files differ
diff --git a/docs/html/design/static/content/index_landing_page.png b/docs/html/design/media/index_landing_page.png
similarity index 100%
rename from docs/html/design/static/content/index_landing_page.png
rename to docs/html/design/media/index_landing_page.png
Binary files differ
diff --git a/docs/html/design/static/content/lists_main.png b/docs/html/design/media/lists_main.png
similarity index 100%
rename from docs/html/design/static/content/lists_main.png
rename to docs/html/design/media/lists_main.png
Binary files differ
diff --git a/docs/html/design/static/content/metrics_48.png b/docs/html/design/media/metrics_48.png
similarity index 100%
rename from docs/html/design/static/content/metrics_48.png
rename to docs/html/design/media/metrics_48.png
Binary files differ
diff --git a/docs/html/design/static/content/metrics_closeup.png b/docs/html/design/media/metrics_closeup.png
similarity index 100%
rename from docs/html/design/static/content/metrics_closeup.png
rename to docs/html/design/media/metrics_closeup.png
Binary files differ
diff --git a/docs/html/design/static/content/metrics_diagram.png b/docs/html/design/media/metrics_diagram.png
similarity index 100%
rename from docs/html/design/static/content/metrics_diagram.png
rename to docs/html/design/media/metrics_diagram.png
Binary files differ
diff --git a/docs/html/design/static/content/metrics_forms.png b/docs/html/design/media/metrics_forms.png
similarity index 100%
rename from docs/html/design/static/content/metrics_forms.png
rename to docs/html/design/media/metrics_forms.png
Binary files differ
diff --git a/docs/html/design/static/content/migrating_icons.png b/docs/html/design/media/migrating_icons.png
similarity index 100%
rename from docs/html/design/static/content/migrating_icons.png
rename to docs/html/design/media/migrating_icons.png
Binary files differ
diff --git a/docs/html/design/static/content/migrating_ios_dialers.png b/docs/html/design/media/migrating_ios_dialers.png
similarity index 100%
rename from docs/html/design/static/content/migrating_ios_dialers.png
rename to docs/html/design/media/migrating_ios_dialers.png
Binary files differ
diff --git a/docs/html/design/static/content/migrating_ios_galleries.png b/docs/html/design/media/migrating_ios_galleries.png
similarity index 100%
rename from docs/html/design/static/content/migrating_ios_galleries.png
rename to docs/html/design/media/migrating_ios_galleries.png
Binary files differ
diff --git a/docs/html/design/static/content/migrating_ios_settings.png b/docs/html/design/media/migrating_ios_settings.png
similarity index 100%
rename from docs/html/design/static/content/migrating_ios_settings.png
rename to docs/html/design/media/migrating_ios_settings.png
Binary files differ
diff --git a/docs/html/design/static/content/migrating_ui_elements.png b/docs/html/design/media/migrating_ui_elements.png
similarity index 100%
rename from docs/html/design/static/content/migrating_ui_elements.png
rename to docs/html/design/media/migrating_ui_elements.png
Binary files differ
diff --git a/docs/html/design/static/content/misc_full_galaxynexus_blank_land_span13.png b/docs/html/design/media/misc_full_galaxynexus_blank_land_span13.png
similarity index 100%
rename from docs/html/design/static/content/misc_full_galaxynexus_blank_land_span13.png
rename to docs/html/design/media/misc_full_galaxynexus_blank_land_span13.png
Binary files differ
diff --git a/docs/html/design/static/content/misc_full_galaxynexus_blank_port_span5.png b/docs/html/design/media/misc_full_galaxynexus_blank_port_span5.png
similarity index 100%
rename from docs/html/design/static/content/misc_full_galaxynexus_blank_port_span5.png
rename to docs/html/design/media/misc_full_galaxynexus_blank_port_span5.png
Binary files differ
diff --git a/docs/html/design/static/content/misc_full_galaxynexus_blank_port_span9.png b/docs/html/design/media/misc_full_galaxynexus_blank_port_span9.png
similarity index 100%
rename from docs/html/design/static/content/misc_full_galaxynexus_blank_port_span9.png
rename to docs/html/design/media/misc_full_galaxynexus_blank_port_span9.png
Binary files differ
diff --git a/docs/html/design/static/content/multipane_expand.png b/docs/html/design/media/multipane_expand.png
similarity index 100%
rename from docs/html/design/static/content/multipane_expand.png
rename to docs/html/design/media/multipane_expand.png
Binary files differ
diff --git a/docs/html/design/static/content/multipane_show.png b/docs/html/design/media/multipane_show.png
similarity index 100%
rename from docs/html/design/static/content/multipane_show.png
rename to docs/html/design/media/multipane_show.png
Binary files differ
diff --git a/docs/html/design/static/content/multipane_stack.png b/docs/html/design/media/multipane_stack.png
similarity index 100%
rename from docs/html/design/static/content/multipane_stack.png
rename to docs/html/design/media/multipane_stack.png
Binary files differ
diff --git a/docs/html/design/static/content/multipane_stretch.png b/docs/html/design/media/multipane_stretch.png
similarity index 100%
rename from docs/html/design/static/content/multipane_stretch.png
rename to docs/html/design/media/multipane_stretch.png
Binary files differ
diff --git a/docs/html/design/static/content/multipane_view_tablet.png b/docs/html/design/media/multipane_view_tablet.png
similarity index 100%
rename from docs/html/design/static/content/multipane_view_tablet.png
rename to docs/html/design/media/multipane_view_tablet.png
Binary files differ
diff --git a/docs/html/design/static/content/multipane_views.png b/docs/html/design/media/multipane_views.png
similarity index 100%
rename from docs/html/design/static/content/multipane_views.png
rename to docs/html/design/media/multipane_views.png
Binary files differ
diff --git a/docs/html/design/static/content/navigation_between_siblings_gmail.png b/docs/html/design/media/navigation_between_siblings_gmail.png
similarity index 100%
rename from docs/html/design/static/content/navigation_between_siblings_gmail.png
rename to docs/html/design/media/navigation_between_siblings_gmail.png
Binary files differ
diff --git a/docs/html/design/static/content/navigation_between_siblings_market1.png b/docs/html/design/media/navigation_between_siblings_market1.png
similarity index 100%
rename from docs/html/design/static/content/navigation_between_siblings_market1.png
rename to docs/html/design/media/navigation_between_siblings_market1.png
Binary files differ
diff --git a/docs/html/design/static/content/navigation_between_siblings_market2.png b/docs/html/design/media/navigation_between_siblings_market2.png
similarity index 100%
rename from docs/html/design/static/content/navigation_between_siblings_market2.png
rename to docs/html/design/media/navigation_between_siblings_market2.png
Binary files differ
diff --git a/docs/html/design/static/content/navigation_from_outside_back.png b/docs/html/design/media/navigation_from_outside_back.png
similarity index 100%
rename from docs/html/design/static/content/navigation_from_outside_back.png
rename to docs/html/design/media/navigation_from_outside_back.png
Binary files differ
diff --git a/docs/html/design/static/content/navigation_from_outside_up.png b/docs/html/design/media/navigation_from_outside_up.png
similarity index 100%
rename from docs/html/design/static/content/navigation_from_outside_up.png
rename to docs/html/design/media/navigation_from_outside_up.png
Binary files differ
diff --git a/docs/html/design/static/content/navigation_up_vs_back_gmail.png b/docs/html/design/media/navigation_up_vs_back_gmail.png
similarity index 100%
rename from docs/html/design/static/content/navigation_up_vs_back_gmail.png
rename to docs/html/design/media/navigation_up_vs_back_gmail.png
Binary files differ
diff --git a/docs/html/design/static/content/navigation_with_back_and_up.png b/docs/html/design/media/navigation_with_back_and_up.png
similarity index 100%
rename from docs/html/design/static/content/navigation_with_back_and_up.png
rename to docs/html/design/media/navigation_with_back_and_up.png
Binary files differ
diff --git a/docs/html/design/static/content/notifications_dismiss.png b/docs/html/design/media/notifications_dismiss.png
similarity index 100%
rename from docs/html/design/static/content/notifications_dismiss.png
rename to docs/html/design/media/notifications_dismiss.png
Binary files differ
diff --git a/docs/html/design/static/content/notifications_pattern_additional_fail.png b/docs/html/design/media/notifications_pattern_additional_fail.png
similarity index 100%
rename from docs/html/design/static/content/notifications_pattern_additional_fail.png
rename to docs/html/design/media/notifications_pattern_additional_fail.png
Binary files differ
diff --git a/docs/html/design/static/content/notifications_pattern_additional_win.png b/docs/html/design/media/notifications_pattern_additional_win.png
similarity index 100%
rename from docs/html/design/static/content/notifications_pattern_additional_win.png
rename to docs/html/design/media/notifications_pattern_additional_win.png
Binary files differ
diff --git a/docs/html/design/static/content/notifications_pattern_anatomy.png b/docs/html/design/media/notifications_pattern_anatomy.png
similarity index 100%
rename from docs/html/design/static/content/notifications_pattern_anatomy.png
rename to docs/html/design/media/notifications_pattern_anatomy.png
Binary files differ
diff --git a/docs/html/design/static/content/notifications_pattern_dialog_toast.png b/docs/html/design/media/notifications_pattern_dialog_toast.png
similarity index 100%
rename from docs/html/design/static/content/notifications_pattern_dialog_toast.png
rename to docs/html/design/media/notifications_pattern_dialog_toast.png
Binary files differ
diff --git a/docs/html/design/static/content/notifications_pattern_ongoing_music.png b/docs/html/design/media/notifications_pattern_ongoing_music.png
similarity index 100%
rename from docs/html/design/static/content/notifications_pattern_ongoing_music.png
rename to docs/html/design/media/notifications_pattern_ongoing_music.png
Binary files differ
diff --git a/docs/html/design/static/content/notifications_pattern_phone_icons.png b/docs/html/design/media/notifications_pattern_phone_icons.png
similarity index 100%
rename from docs/html/design/static/content/notifications_pattern_phone_icons.png
rename to docs/html/design/media/notifications_pattern_phone_icons.png
Binary files differ
diff --git a/docs/html/design/static/content/notifications_pattern_phone_ticker.png b/docs/html/design/media/notifications_pattern_phone_ticker.png
similarity index 100%
rename from docs/html/design/static/content/notifications_pattern_phone_ticker.png
rename to docs/html/design/media/notifications_pattern_phone_ticker.png
Binary files differ
diff --git a/docs/html/design/static/content/notifications_pattern_real_time_people.png b/docs/html/design/media/notifications_pattern_real_time_people.png
similarity index 100%
rename from docs/html/design/static/content/notifications_pattern_real_time_people.png
rename to docs/html/design/media/notifications_pattern_real_time_people.png
Binary files differ
diff --git a/docs/html/design/static/content/notifications_pattern_social_fail.png b/docs/html/design/media/notifications_pattern_social_fail.png
similarity index 100%
rename from docs/html/design/static/content/notifications_pattern_social_fail.png
rename to docs/html/design/media/notifications_pattern_social_fail.png
Binary files differ
diff --git a/docs/html/design/static/content/notifications_pattern_tablet.png b/docs/html/design/media/notifications_pattern_tablet.png
similarity index 100%
rename from docs/html/design/static/content/notifications_pattern_tablet.png
rename to docs/html/design/media/notifications_pattern_tablet.png
Binary files differ
diff --git a/docs/html/design/static/content/patterns_landing.png b/docs/html/design/media/patterns_landing.png
similarity index 100%
rename from docs/html/design/static/content/patterns_landing.png
rename to docs/html/design/media/patterns_landing.png
Binary files differ
diff --git a/docs/html/design/static/content/picker_datetime.png b/docs/html/design/media/picker_datetime.png
similarity index 100%
rename from docs/html/design/static/content/picker_datetime.png
rename to docs/html/design/media/picker_datetime.png
Binary files differ
diff --git a/docs/html/design/static/content/picker_space.png b/docs/html/design/media/picker_space.png
similarity index 100%
rename from docs/html/design/static/content/picker_space.png
rename to docs/html/design/media/picker_space.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_decide_for_me.png b/docs/html/design/media/principles_decide_for_me.png
similarity index 100%
rename from docs/html/design/static/content/principles_decide_for_me.png
rename to docs/html/design/media/principles_decide_for_me.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_delight.png b/docs/html/design/media/principles_delight.png
similarity index 100%
rename from docs/html/design/static/content/principles_delight.png
rename to docs/html/design/media/principles_delight.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_error.png b/docs/html/design/media/principles_error.png
similarity index 100%
rename from docs/html/design/static/content/principles_error.png
rename to docs/html/design/media/principles_error.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_get_to_know_me.png b/docs/html/design/media/principles_get_to_know_me.png
similarity index 100%
rename from docs/html/design/static/content/principles_get_to_know_me.png
rename to docs/html/design/media/principles_get_to_know_me.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_heavy_lifting.png b/docs/html/design/media/principles_heavy_lifting.png
similarity index 100%
rename from docs/html/design/static/content/principles_heavy_lifting.png
rename to docs/html/design/media/principles_heavy_lifting.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_important_interruption.png b/docs/html/design/media/principles_important_interruption.png
similarity index 100%
rename from docs/html/design/static/content/principles_important_interruption.png
rename to docs/html/design/media/principles_important_interruption.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_information_when_need_it.png b/docs/html/design/media/principles_information_when_need_it.png
similarity index 100%
rename from docs/html/design/static/content/principles_information_when_need_it.png
rename to docs/html/design/media/principles_information_when_need_it.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_keep_it_brief.png b/docs/html/design/media/principles_keep_it_brief.png
similarity index 100%
rename from docs/html/design/static/content/principles_keep_it_brief.png
rename to docs/html/design/media/principles_keep_it_brief.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_looks_same.png b/docs/html/design/media/principles_looks_same.png
similarity index 100%
rename from docs/html/design/static/content/principles_looks_same.png
rename to docs/html/design/media/principles_looks_same.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_make_important_fast.png b/docs/html/design/media/principles_make_important_fast.png
similarity index 100%
rename from docs/html/design/static/content/principles_make_important_fast.png
rename to docs/html/design/media/principles_make_important_fast.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_make_it_mine.png b/docs/html/design/media/principles_make_it_mine.png
similarity index 100%
rename from docs/html/design/static/content/principles_make_it_mine.png
rename to docs/html/design/media/principles_make_it_mine.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_navigation.png b/docs/html/design/media/principles_navigation.png
similarity index 100%
rename from docs/html/design/static/content/principles_navigation.png
rename to docs/html/design/media/principles_navigation.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_never_lose_stuff.png b/docs/html/design/media/principles_never_lose_stuff.png
similarity index 100%
rename from docs/html/design/static/content/principles_never_lose_stuff.png
rename to docs/html/design/media/principles_never_lose_stuff.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_pictures.png b/docs/html/design/media/principles_pictures.png
similarity index 100%
rename from docs/html/design/static/content/principles_pictures.png
rename to docs/html/design/media/principles_pictures.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_real_objects.png b/docs/html/design/media/principles_real_objects.png
similarity index 100%
rename from docs/html/design/static/content/principles_real_objects.png
rename to docs/html/design/media/principles_real_objects.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_sprinkle_encouragement.png b/docs/html/design/media/principles_sprinkle_encouragement.png
similarity index 100%
rename from docs/html/design/static/content/principles_sprinkle_encouragement.png
rename to docs/html/design/media/principles_sprinkle_encouragement.png
Binary files differ
diff --git a/docs/html/design/static/content/principles_tricks.png b/docs/html/design/media/principles_tricks.png
similarity index 100%
rename from docs/html/design/static/content/principles_tricks.png
rename to docs/html/design/media/principles_tricks.png
Binary files differ
diff --git a/docs/html/design/static/content/progress_activity.png b/docs/html/design/media/progress_activity.png
similarity index 100%
rename from docs/html/design/static/content/progress_activity.png
rename to docs/html/design/media/progress_activity.png
Binary files differ
diff --git a/docs/html/design/static/content/progress_activity2.png b/docs/html/design/media/progress_activity2.png
similarity index 100%
rename from docs/html/design/static/content/progress_activity2.png
rename to docs/html/design/media/progress_activity2.png
Binary files differ
diff --git a/docs/html/design/static/content/progress_download.png b/docs/html/design/media/progress_download.png
similarity index 100%
rename from docs/html/design/static/content/progress_download.png
rename to docs/html/design/media/progress_download.png
Binary files differ
diff --git a/docs/html/design/static/content/progress_themes.png b/docs/html/design/media/progress_themes.png
similarity index 100%
rename from docs/html/design/static/content/progress_themes.png
rename to docs/html/design/media/progress_themes.png
Binary files differ
diff --git a/docs/html/design/static/content/scroll_index.mp4 b/docs/html/design/media/scroll_index.mp4
similarity index 100%
rename from docs/html/design/static/content/scroll_index.mp4
rename to docs/html/design/media/scroll_index.mp4
Binary files differ
diff --git a/docs/html/design/static/content/scroll_index.ogv b/docs/html/design/media/scroll_index.ogv
similarity index 100%
rename from docs/html/design/static/content/scroll_index.ogv
rename to docs/html/design/media/scroll_index.ogv
Binary files differ
diff --git a/docs/html/design/static/content/scroll_index.webm b/docs/html/design/media/scroll_index.webm
similarity index 100%
rename from docs/html/design/static/content/scroll_index.webm
rename to docs/html/design/media/scroll_index.webm
Binary files differ
diff --git a/docs/html/design/static/content/scroll_indicator.mp4 b/docs/html/design/media/scroll_indicator.mp4
similarity index 100%
rename from docs/html/design/static/content/scroll_indicator.mp4
rename to docs/html/design/media/scroll_indicator.mp4
Binary files differ
diff --git a/docs/html/design/static/content/scroll_indicator.ogv b/docs/html/design/media/scroll_indicator.ogv
similarity index 100%
rename from docs/html/design/static/content/scroll_indicator.ogv
rename to docs/html/design/media/scroll_indicator.ogv
Binary files differ
diff --git a/docs/html/design/static/content/scroll_indicator.webm b/docs/html/design/media/scroll_indicator.webm
similarity index 100%
rename from docs/html/design/static/content/scroll_indicator.webm
rename to docs/html/design/media/scroll_indicator.webm
Binary files differ
diff --git a/docs/html/design/static/content/seekbar_example.png b/docs/html/design/media/seekbar_example.png
similarity index 100%
rename from docs/html/design/static/content/seekbar_example.png
rename to docs/html/design/media/seekbar_example.png
Binary files differ
diff --git a/docs/html/design/static/content/seekbar_style.png b/docs/html/design/media/seekbar_style.png
similarity index 100%
rename from docs/html/design/static/content/seekbar_style.png
rename to docs/html/design/media/seekbar_style.png
Binary files differ
diff --git a/docs/html/design/static/content/selection_adjusting_actions.png b/docs/html/design/media/selection_adjusting_actions.png
similarity index 100%
rename from docs/html/design/static/content/selection_adjusting_actions.png
rename to docs/html/design/media/selection_adjusting_actions.png
Binary files differ
diff --git a/docs/html/design/static/content/selection_cab_big.png b/docs/html/design/media/selection_cab_big.png
similarity index 100%
rename from docs/html/design/static/content/selection_cab_big.png
rename to docs/html/design/media/selection_cab_big.png
Binary files differ
diff --git a/docs/html/design/static/content/selection_cab_example.png b/docs/html/design/media/selection_cab_example.png
similarity index 100%
rename from docs/html/design/static/content/selection_cab_example.png
rename to docs/html/design/media/selection_cab_example.png
Binary files differ
diff --git a/docs/html/design/static/content/selection_context_menu.png b/docs/html/design/media/selection_context_menu.png
similarity index 100%
rename from docs/html/design/static/content/selection_context_menu.png
rename to docs/html/design/media/selection_context_menu.png
Binary files differ
diff --git a/docs/html/design/static/content/spinners_actionbar.png b/docs/html/design/media/spinners_actionbar.png
similarity index 100%
rename from docs/html/design/static/content/spinners_actionbar.png
rename to docs/html/design/media/spinners_actionbar.png
Binary files differ
diff --git a/docs/html/design/static/content/spinners_form.png b/docs/html/design/media/spinners_form.png
similarity index 100%
rename from docs/html/design/static/content/spinners_form.png
rename to docs/html/design/media/spinners_form.png
Binary files differ
diff --git a/docs/html/design/static/content/spinners_hololightanddark.png b/docs/html/design/media/spinners_hololightanddark.png
similarity index 100%
rename from docs/html/design/static/content/spinners_hololightanddark.png
rename to docs/html/design/media/spinners_hololightanddark.png
Binary files differ
diff --git a/docs/html/design/static/content/swipe_tabs.mp4 b/docs/html/design/media/swipe_tabs.mp4
similarity index 100%
rename from docs/html/design/static/content/swipe_tabs.mp4
rename to docs/html/design/media/swipe_tabs.mp4
Binary files differ
diff --git a/docs/html/design/static/content/swipe_tabs.ogv b/docs/html/design/media/swipe_tabs.ogv
similarity index 100%
rename from docs/html/design/static/content/swipe_tabs.ogv
rename to docs/html/design/media/swipe_tabs.ogv
Binary files differ
diff --git a/docs/html/design/static/content/swipe_tabs.png b/docs/html/design/media/swipe_tabs.png
similarity index 100%
rename from docs/html/design/static/content/swipe_tabs.png
rename to docs/html/design/media/swipe_tabs.png
Binary files differ
diff --git a/docs/html/design/static/content/swipe_tabs.webm b/docs/html/design/media/swipe_tabs.webm
similarity index 100%
rename from docs/html/design/static/content/swipe_tabs.webm
rename to docs/html/design/media/swipe_tabs.webm
Binary files differ
diff --git a/docs/html/design/static/content/swipe_views.png b/docs/html/design/media/swipe_views.png
similarity index 100%
rename from docs/html/design/static/content/swipe_views.png
rename to docs/html/design/media/swipe_views.png
Binary files differ
diff --git a/docs/html/design/static/content/swipe_views2.png b/docs/html/design/media/swipe_views2.png
similarity index 100%
rename from docs/html/design/static/content/swipe_views2.png
rename to docs/html/design/media/swipe_views2.png
Binary files differ
diff --git a/docs/html/design/static/content/switches_checkboxes.png b/docs/html/design/media/switches_checkboxes.png
similarity index 100%
rename from docs/html/design/static/content/switches_checkboxes.png
rename to docs/html/design/media/switches_checkboxes.png
Binary files differ
diff --git a/docs/html/design/static/content/switches_radios.png b/docs/html/design/media/switches_radios.png
similarity index 100%
rename from docs/html/design/static/content/switches_radios.png
rename to docs/html/design/media/switches_radios.png
Binary files differ
diff --git a/docs/html/design/static/content/switches_switches.png b/docs/html/design/media/switches_switches.png
similarity index 100%
rename from docs/html/design/static/content/switches_switches.png
rename to docs/html/design/media/switches_switches.png
Binary files differ
diff --git a/docs/html/design/static/content/system_ui_landing.png b/docs/html/design/media/system_ui_landing.png
similarity index 100%
rename from docs/html/design/static/content/system_ui_landing.png
rename to docs/html/design/media/system_ui_landing.png
Binary files differ
diff --git a/docs/html/design/static/content/tabs_overview.png b/docs/html/design/media/tabs_overview.png
similarity index 100%
rename from docs/html/design/static/content/tabs_overview.png
rename to docs/html/design/media/tabs_overview.png
Binary files differ
diff --git a/docs/html/design/static/content/tabs_scrolly.mp4 b/docs/html/design/media/tabs_scrolly.mp4
similarity index 100%
rename from docs/html/design/static/content/tabs_scrolly.mp4
rename to docs/html/design/media/tabs_scrolly.mp4
Binary files differ
diff --git a/docs/html/design/static/content/tabs_scrolly.ogv b/docs/html/design/media/tabs_scrolly.ogv
similarity index 100%
rename from docs/html/design/static/content/tabs_scrolly.ogv
rename to docs/html/design/media/tabs_scrolly.ogv
Binary files differ
diff --git a/docs/html/design/static/content/tabs_scrolly.webm b/docs/html/design/media/tabs_scrolly.webm
similarity index 100%
rename from docs/html/design/static/content/tabs_scrolly.webm
rename to docs/html/design/media/tabs_scrolly.webm
Binary files differ
diff --git a/docs/html/design/static/content/tabs_stacked.png b/docs/html/design/media/tabs_stacked.png
similarity index 100%
rename from docs/html/design/static/content/tabs_stacked.png
rename to docs/html/design/media/tabs_stacked.png
Binary files differ
diff --git a/docs/html/design/static/content/tabs_standard.png b/docs/html/design/media/tabs_standard.png
similarity index 100%
rename from docs/html/design/static/content/tabs_standard.png
rename to docs/html/design/media/tabs_standard.png
Binary files differ
diff --git a/docs/html/design/static/content/tabs_youtube.png b/docs/html/design/media/tabs_youtube.png
similarity index 100%
rename from docs/html/design/static/content/tabs_youtube.png
rename to docs/html/design/media/tabs_youtube.png
Binary files differ
diff --git a/docs/html/design/static/content/text_input_holodarkandlight.png b/docs/html/design/media/text_input_holodarkandlight.png
similarity index 100%
rename from docs/html/design/static/content/text_input_holodarkandlight.png
rename to docs/html/design/media/text_input_holodarkandlight.png
Binary files differ
diff --git a/docs/html/design/static/content/text_input_singlevsmultiline.png b/docs/html/design/media/text_input_singlevsmultiline.png
similarity index 100%
rename from docs/html/design/static/content/text_input_singlevsmultiline.png
rename to docs/html/design/media/text_input_singlevsmultiline.png
Binary files differ
diff --git a/docs/html/design/static/content/text_input_textselection.png b/docs/html/design/media/text_input_textselection.png
similarity index 100%
rename from docs/html/design/static/content/text_input_textselection.png
rename to docs/html/design/media/text_input_textselection.png
Binary files differ
diff --git a/docs/html/design/static/content/text_input_typesandtypedown.png b/docs/html/design/media/text_input_typesandtypedown.png
similarity index 100%
rename from docs/html/design/static/content/text_input_typesandtypedown.png
rename to docs/html/design/media/text_input_typesandtypedown.png
Binary files differ
diff --git a/docs/html/design/static/content/themes_holo_dark.png b/docs/html/design/media/themes_holo_dark.png
similarity index 100%
rename from docs/html/design/static/content/themes_holo_dark.png
rename to docs/html/design/media/themes_holo_dark.png
Binary files differ
diff --git a/docs/html/design/static/content/themes_holo_inverse.png b/docs/html/design/media/themes_holo_inverse.png
similarity index 100%
rename from docs/html/design/static/content/themes_holo_inverse.png
rename to docs/html/design/media/themes_holo_inverse.png
Binary files differ
diff --git a/docs/html/design/static/content/themes_holo_light.png b/docs/html/design/media/themes_holo_light.png
similarity index 100%
rename from docs/html/design/static/content/themes_holo_light.png
rename to docs/html/design/media/themes_holo_light.png
Binary files differ
diff --git a/docs/html/design/static/content/touch_feedback_communication.png b/docs/html/design/media/touch_feedback_communication.png
similarity index 100%
rename from docs/html/design/static/content/touch_feedback_communication.png
rename to docs/html/design/media/touch_feedback_communication.png
Binary files differ
diff --git a/docs/html/design/static/content/touch_feedback_manipulation.png b/docs/html/design/media/touch_feedback_manipulation.png
similarity index 100%
rename from docs/html/design/static/content/touch_feedback_manipulation.png
rename to docs/html/design/media/touch_feedback_manipulation.png
Binary files differ
diff --git a/docs/html/design/static/content/touch_feedback_reaction_response.png b/docs/html/design/media/touch_feedback_reaction_response.png
similarity index 100%
rename from docs/html/design/static/content/touch_feedback_reaction_response.png
rename to docs/html/design/media/touch_feedback_reaction_response.png
Binary files differ
diff --git a/docs/html/design/static/content/touch_feedback_states.png b/docs/html/design/media/touch_feedback_states.png
similarity index 100%
rename from docs/html/design/static/content/touch_feedback_states.png
rename to docs/html/design/media/touch_feedback_states.png
Binary files differ
diff --git a/docs/html/design/static/content/typography_alphas.png b/docs/html/design/media/typography_alphas.png
similarity index 100%
rename from docs/html/design/static/content/typography_alphas.png
rename to docs/html/design/media/typography_alphas.png
Binary files differ
diff --git a/docs/html/design/static/content/typography_defaults.png b/docs/html/design/media/typography_defaults.png
similarity index 100%
rename from docs/html/design/static/content/typography_defaults.png
rename to docs/html/design/media/typography_defaults.png
Binary files differ
diff --git a/docs/html/design/static/content/typography_main.png b/docs/html/design/media/typography_main.png
similarity index 100%
rename from docs/html/design/static/content/typography_main.png
rename to docs/html/design/media/typography_main.png
Binary files differ
diff --git a/docs/html/design/static/content/typography_sizes.png b/docs/html/design/media/typography_sizes.png
similarity index 100%
rename from docs/html/design/static/content/typography_sizes.png
rename to docs/html/design/media/typography_sizes.png
Binary files differ
diff --git a/docs/html/design/static/content/ui_overview_all_apps.png b/docs/html/design/media/ui_overview_all_apps.png
similarity index 100%
rename from docs/html/design/static/content/ui_overview_all_apps.png
rename to docs/html/design/media/ui_overview_all_apps.png
Binary files differ
diff --git a/docs/html/design/static/content/ui_overview_app_ui.png b/docs/html/design/media/ui_overview_app_ui.png
similarity index 100%
rename from docs/html/design/static/content/ui_overview_app_ui.png
rename to docs/html/design/media/ui_overview_app_ui.png
Binary files differ
diff --git a/docs/html/design/static/content/ui_overview_home_screen.png b/docs/html/design/media/ui_overview_home_screen.png
similarity index 100%
rename from docs/html/design/static/content/ui_overview_home_screen.png
rename to docs/html/design/media/ui_overview_home_screen.png
Binary files differ
diff --git a/docs/html/design/static/content/ui_overview_notifications.png b/docs/html/design/media/ui_overview_notifications.png
similarity index 100%
rename from docs/html/design/static/content/ui_overview_notifications.png
rename to docs/html/design/media/ui_overview_notifications.png
Binary files differ
diff --git a/docs/html/design/static/content/ui_overview_recents.png b/docs/html/design/media/ui_overview_recents.png
similarity index 100%
rename from docs/html/design/static/content/ui_overview_recents.png
rename to docs/html/design/media/ui_overview_recents.png
Binary files differ
diff --git a/docs/html/design/static/content/ui_overview_system_ui.png b/docs/html/design/media/ui_overview_system_ui.png
similarity index 100%
rename from docs/html/design/static/content/ui_overview_system_ui.png
rename to docs/html/design/media/ui_overview_system_ui.png
Binary files differ
diff --git a/docs/html/design/static/content/whats_new_action_bar.png b/docs/html/design/media/whats_new_action_bar.png
similarity index 100%
rename from docs/html/design/static/content/whats_new_action_bar.png
rename to docs/html/design/media/whats_new_action_bar.png
Binary files differ
diff --git a/docs/html/design/static/content/whats_new_multipanel.png b/docs/html/design/media/whats_new_multipanel.png
similarity index 100%
rename from docs/html/design/static/content/whats_new_multipanel.png
rename to docs/html/design/media/whats_new_multipanel.png
Binary files differ
diff --git a/docs/html/design/static/content/whats_new_multiselect.png b/docs/html/design/media/whats_new_multiselect.png
similarity index 100%
rename from docs/html/design/static/content/whats_new_multiselect.png
rename to docs/html/design/media/whats_new_multiselect.png
Binary files differ
diff --git a/docs/html/design/static/content/whats_new_nav_bar.png b/docs/html/design/media/whats_new_nav_bar.png
similarity index 100%
rename from docs/html/design/static/content/whats_new_nav_bar.png
rename to docs/html/design/media/whats_new_nav_bar.png
Binary files differ
diff --git a/docs/html/design/patterns/actionbar.html b/docs/html/design/patterns/actionbar.jd
similarity index 62%
rename from docs/html/design/patterns/actionbar.html
rename to docs/html/design/patterns/actionbar.jd
index e93498e..9e3f48c 100644
--- a/docs/html/design/patterns/actionbar.html
+++ b/docs/html/design/patterns/actionbar.jd
@@ -1,112 +1,7 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
+page.title=Action Bar
+@jd:body
 
-Android Design - Action Bar
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Action Bar</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<img src="../static/content/action_bar_pattern_overview.png">
+<img src="{@docRoot}design/media/action_bar_pattern_overview.png">
 
 <p>The <em>action bar</em> is arguably the most important structural element of an Android app. It's a
 dedicated piece of real estate at the top of each screen that is generally persistent throughout the
@@ -125,7 +20,7 @@
 <h2 id="organization">General Organization</h2>
 
 <p>The action bar is split into four different functional areas that apply to most apps.</p>
-<img src="../static/content/action_bar_basics.png">
+<img src="{@docRoot}design/media/action_bar_basics.png">
 
 <div class="layout-content-row">
   <div class="layout-content-col span-7 with-callouts">
@@ -138,10 +33,10 @@
 if you wish.
 Important: If the app is currently not displaying the top-level screen, be sure to display the Up
 caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of
-Up navigation, see the <a href="../patterns/navigation.html">Navigation</a> pattern.
+Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern.
 
 <div class="figure">
-  <img src="../static/content/action_bar_pattern_up_app_icon.png">
+  <img src="{@docRoot}design/media/action_bar_pattern_up_app_icon.png">
   <div class="figure-caption">
     App icon with and without "up" affordance.
   </div>
@@ -195,7 +90,7 @@
 <p>You can adapt to such changes by using <em>split action bars</em>, which allow you to distribute action bar
 content across multiple bars located below the main action bar or at the bottom of the screen.</p>
 
-<img src="../static/content/action_bar_pattern_rotation.png">
+<img src="{@docRoot}design/media/action_bar_pattern_rotation.png">
 <div class="figure-caption">
   Split action bar showing action buttons at the bottom of the screen in vertical orientation.
 </div>
@@ -221,7 +116,7 @@
   </div>
   <div class="layout-content-col span-3">
 
-    <img src="../static/content/action_bar_pattern_considerations.png">
+    <img src="{@docRoot}design/media/action_bar_pattern_considerations.png">
 
   </div>
 </div>
@@ -232,7 +127,7 @@
 duration of a particular sub-task. CABs are most typically used for tasks that involve acting on
 selected data or text.</p>
 
-<img src="../static/content/action_bar_cab.png">
+<img src="{@docRoot}design/media/action_bar_cab.png">
 <div class="figure-caption">
   Contextual action bar shown in Browser and Gmail
 </div>
@@ -255,7 +150,7 @@
 <p><em>Tabs</em> display app views concurrently and make it easy to explore and switch between them. Use tabs
 if you expect your users to switch views frequently.</p>
 
-<img src="../static/content/tabs_youtube.png">
+<img src="{@docRoot}design/media/tabs_youtube.png">
 
 <p>There are two types of tabs: fixed and scrollable.</p>
 
@@ -276,12 +171,12 @@
   <div class="layout-content-col span-7">
 
     <video width="400" class="with-shadow play-on-hover" autoplay>
-      <source src="../static/content/tabs_scrolly.mp4" type="video/mp4">
-      <source src="../static/content/tabs_scrolly.webm" type="video/webm">
-      <source src="../static/content/tabs_scrolly.ogv" type="video/ogg">
+      <source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4">
+      <source src="{@docRoot}design/media/tabs_scrolly.webm" type="video/webm">
+      <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg">
     </video>
     <div class="figure-caption">
-      Scrolling tabs on Google Play.
+      Scrolling tabs in Google Play.
       <div class="video-instructions">&nbsp;</div>
     </div>
 
@@ -298,7 +193,7 @@
   </div>
   <div class="layout-content-col span-7">
 
-    <img src="../static/content/action_bar_pattern_default_tabs.png">
+    <img src="{@docRoot}design/media/action_bar_pattern_default_tabs.png">
     <div class="figure-caption">
       Default fixed tabs shown in Holo Dark &amp; Light.
     </div>
@@ -320,7 +215,7 @@
   </div>
   <div class="layout-content-col span-7">
 
-    <img src="../static/content/action_bar_pattern_spinner.png">
+    <img src="{@docRoot}design/media/action_bar_pattern_spinner.png">
     <div class="figure-caption">
       Action bar spinner from Calendar application.
     </div>
@@ -336,7 +231,7 @@
 are available. If an action is unavailable in the current context, hide it. Do not show it as
 disabled.</p>
 
-<img src="../static/content/action_bar_pattern_action_icons.png">
+<img src="{@docRoot}design/media/action_bar_pattern_action_icons.png">
 <div class="figure-caption">
   A sampling of action buttons used throughout the Gmail application.
 </div>
@@ -403,7 +298,7 @@
   </div>
   <div class="layout-content-col span-7">
 
-    <img src="../static/content/action_bar_pattern_overflow.png">
+    <img src="{@docRoot}design/media/action_bar_pattern_overflow.png">
     <div class="figure-caption">
       Action overflow is pinned to the right side.
     </div>
@@ -427,7 +322,7 @@
 </li>
 </ul>
 
-<img src="../static/content/action_bar_pattern_table.png">
+<img src="{@docRoot}design/media/action_bar_pattern_table.png">
 <div class="figure-caption">
   In the above table "o" denotes an action bar item and "=" an overflow icon.
 </div>
@@ -438,7 +333,7 @@
 displaying the most recently used sharing service next to a spinner button that contains other
 sharing options.</p>
 
-<img src="../static/content/action_bar_pattern_share_pack.png">
+<img src="{@docRoot}design/media/action_bar_pattern_share_pack.png">
 <div class="figure-caption">
   The Gallery app's share action provider with extended spinner for additional sharing options.
 </div>
@@ -457,55 +352,3 @@
 Examples are the number of unread messages in a messaging inbox view or the Now Playing information
 in a music player. Carefully plan which important information you would like to display and
 structure your action bars accordingly.</p>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/app-structure.html b/docs/html/design/patterns/app-structure.html
deleted file mode 100644
index 6780594..0000000
--- a/docs/html/design/patterns/app-structure.html
+++ /dev/null
@@ -1,411 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Application Structure
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Application Structure</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Apps come in many varieties that address very different needs. For example:</p>
-<ul>
-<li>Apps such as Calculator or Camera that are built around a single focused activity handled from a
-  single screen</li>
-<li>Apps such as Phone whose main purpose is to switch between different activities without deeper
-  navigation</li>
-<li>Apps such as Gmail and Google Play that combine a broad set of data views with deep navigation</li>
-</ul>
-<p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p>
-<h2 id="general-structure">General Structure</h2>
-
-<p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is
-deep and complex, category views connect top level and detail views.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/app_structure_overview.png">
-
-  </div>
-  <div class="layout-content-col span-4">
-
-<h4>Top level views</h4>
-<p>The top level of the app typically consists of the different views that your app supports. The views
-either show different representations of the same data or expose an altogether different functional
-facet of your app.</p>
-<div class="vspace size-3">&nbsp;</div>
-
-<h4>Category views</h4>
-<p>Category views allow you to drill deeper into your data.</p>
-<div class="vspace size-11">&nbsp;</div>
-
-<h4>Detail/edit view</h4>
-<p>The detail/edit view is where you consume or create data.</p>
-
-  </div>
-</div>
-
-<h2 id="top-level">Top Level</h2>
-
-<p>The layout of your start screen requires special attention. This is the first screen people see
-after launching your app, so it should be an equally rewarding experience for new and frequent
-visitors alike.</p>
-<p>Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure
-your start screen experience accordingly.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Put content forward</h4>
-<p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to
-the meat of your app right away by making content the centerpiece of your start screen. Choose
-layouts that are visually engaging and appropriate for the data type and screen size.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/app_structure_market.png">
-    <div class="figure-caption">
-      The Google Play 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>Set up action bars for navigation and actions</h4>
-<p>All screens in your app should display action bars to provide consistent navigation and surface
-important actions.</p>
-<p>At the top level, special considerations apply to the action bar:</p>
-<ul>
-<li>Use the action bar to display your app's icon or title.</li>
-<li>If your top level consists of multiple views, or if switching between data from different user
-  accounts is a significant use case, make sure that it's easy for the user to navigate between them
-  by adding view controls to your action bar.</li>
-<li>If your app allows people to create content, consider making the content accessible right from the
-  top level.</li>
-<li>If your content is searchable, include the Search action in the action bar so people can cut
-  through the navigation hierarchy.</li>
-</ul>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/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.
-    </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="../static/content/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.
-    </div>
-
-  </div>
-</div>
-
-<h2 id="categories">Categories</h2>
-
-<p>Generally, the purpose of a deep, data-driven app is to navigate through organizational categories
-to the detail level, where data can be viewed and managed. Minimize perceived navigation effort by
-keeping your apps shallow.</p>
-<p>Even though the number of vertical navigation steps from the top level down to the detail views is
-typically dictated by the structure of your app's content, there are several ways you can cut down
-on the perception of onerous navigation.</p>
-<h4>Use tabs to combine category selection and data display</h4>
-<p>This can be successful if the categories are familiar or the number of categories is small. It has
-the advantage that a level of hierarchy is removed and data remains at the center of the user's
-attention. Navigating laterally between data-rich categories is more akin to a casual browsing
-experience than to an explicit navigation step.</p>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-<p>If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all
-items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to
-minimize navigational effort. Rule of thumb: no more than 5&ndash;7 tabs.</p>
-
-    <img src="../static/content/app_structure_scrolltabs.png">
-    <div class="figure-caption">
-      Google Play uses tabs to simultaneously show category choice and content. To navigate between
-      categories, users can swipe left/right on the content.
-    </div>
-
-  </div>
-  <div class="layout-content-col span-5">
-
-<p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are
-in view at the same time.</p>
-
-    <img src="../static/content/app_structure_fixedtabs.png">
-    <div class="figure-caption">
-      YouTube uses fixed tabs to switch between different, relatively unrelated functional areas.
-    </div>
-
-
-  </div>
-</div>
-
-<h4>Allow cutting through hierarchies</h4>
-<p>Take advantage of shortcuts that allow people to reach their goals quicker. To allow top-level
-invocation of actions for a data item from within list or grid views, display prominent actions
-directly on list view items using drop-downs or split list items. This lets people invoke actions on
-data without having to navigate all the way down the hierarchy.</p>
-
-<img src="../static/content/app_structure_shortcut_on_item.png">
-<div class="figure-caption">
-  Music allows the user to act upon a data item (song) from within the category view (album),
-  thereby removing the need to navigate all the way down to the song's detail view.
-</div>
-
-<h4>Acting upon multiple data items</h4>
-<p>Even though category views mostly serve to guide people to content detail, keep in mind that there
-are often good reasons to act on collections of data as well.</p>
-<p>For example, if you allow people to delete an item in a detail view, you should also allow them to
-delete multiple items in the category view. Analyze which detail view actions are applicable to
-collections of items. Then use multi-select to allow application of those actions to multiple items
-in a category view.</p>
-<h2 id="details">Details</h2>
-
-<p>The detail view allows you to view and act on your data. The layout of the detail view depends on
-the data type being displayed, and therefore differs widely among apps.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-<h4>Layout</h4>
-<p>Consider the activities people will perform in the detail view and arrange the layout accordingly.
-For immersive content, make use of the lights-out mode to allow for distraction-free viewing of
-full-screen content.</p>
-
-    <img src="../static/content/app_structure_people_detail.png">
-
-  </div>
-  <div class="layout-content-col span-9">
-
-    <img src="../static/content/app_structure_book_detail_page_flip.png">
-    <div class="figure-caption">
-      Google Books' detail view is all about replicating the experience of reading an actual book.
-      The page-flip animation reinforces that notion. To create an immersive experience the app
-      enters lights-out mode, which hides all system UI affordances.
-    </div>
-
-    <div class="figure-caption">
-      The purpose of the People app's detail view is to surface communication options. The list view
-      allows for efficient scanning and quick access of phone numbers, email addresses and other
-      information items. Split items are used to combine calling and messaging into one compact line
-      item.
-    </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
-between items from within the detail view. Use swipe views or other techniques, such as filmstrips,
-to achieve this.</p>
-
-<img src="../static/content/app_structure_gmail_swipe.png">
-<div class="figure-caption">
-  Gmail using swipe views to navigate from detail view to detail view.
-</div>
-
-<img src="../static/content/app_structure_gallery_filmstrip.png">
-<div class="figure-caption">
-  In addition to supporting swipe gestures to move left or right through images, Gallery provides a
-  filmstrip control that lets people quickly jump to specific images.
-</div>
-
-<h2 id="checklist">Checklist</h2>
-
-<ul>
-<li>
-<p>Find ways to display useful content on your start screen.</p>
-</li>
-<li>
-<p>Use action bars to provide consistent navigation.</p>
-</li>
-<li>
-<p>Keep your hierarchies shallow by using horizontal navigation and shortcuts.</p>
-</li>
-<li>
-<p>Use multi-select to allow the user to act on collections of data.</p>
-</li>
-<li>
-<p>Allow for quick navigation between detail items with swipe views.</p>
-</li>
-</ul>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd
new file mode 100644
index 0000000..b54b12f
--- /dev/null
+++ b/docs/html/design/patterns/app-structure.jd
@@ -0,0 +1,254 @@
+page.title=Application Structure
+@jd:body
+
+<p>Apps come in many varieties that address very different needs. For example:</p>
+<ul>
+<li>Apps such as Calculator or Camera that are built around a single focused activity handled from a
+  single screen</li>
+<li>Apps such as Phone whose main purpose is to switch between different activities without deeper
+  navigation</li>
+<li>Apps such as Gmail or Google Play that combine a broad set of data views with deep navigation</li>
+</ul>
+<p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p>
+<h2 id="general-structure">General Structure</h2>
+
+<p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is
+deep and complex, category views connect top level and detail views.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/app_structure_overview.png">
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<h4>Top level views</h4>
+<p>The top level of the app typically consists of the different views that your app supports. The views
+either show different representations of the same data or expose an altogether different functional
+facet of your app.</p>
+<div class="vspace size-3">&nbsp;</div>
+
+<h4>Category views</h4>
+<p>Category views allow you to drill deeper into your data.</p>
+<div class="vspace size-11">&nbsp;</div>
+
+<h4>Detail/edit view</h4>
+<p>The detail/edit view is where you consume or create data.</p>
+
+  </div>
+</div>
+
+<h2 id="top-level">Top Level</h2>
+
+<p>The layout of your start screen requires special attention. This is the first screen people see
+after launching your app, so it should be an equally rewarding experience for new and frequent
+visitors alike.</p>
+<p>Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure
+your start screen experience accordingly.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Put content forward</h4>
+<p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to
+the meat of your app right away by making content the centerpiece of your start screen. Choose
+layouts that are visually engaging and appropriate for the data type and screen size.</p>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/app_structure_market.png">
+    <div class="figure-caption">
+      The Google Play 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>Set up action bars for navigation and actions</h4>
+<p>All screens in your app should display action bars to provide consistent navigation and surface
+important actions.</p>
+<p>At the top level, special considerations apply to the action bar:</p>
+<ul>
+<li>Use the action bar to display your app's icon or title.</li>
+<li>If your top level consists of multiple views, or if switching between data from different user
+  accounts is a significant use case, make sure that it's easy for the user to navigate between them
+  by adding view controls to your action bar.</li>
+<li>If your app allows people to create content, consider making the content accessible right from the
+  top level.</li>
+<li>If your content is searchable, include the Search action in the action bar so people can cut
+  through the navigation hierarchy.</li>
+</ul>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <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.
+    </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.
+    </div>
+
+  </div>
+</div>
+
+<h2 id="categories">Categories</h2>
+
+<p>Generally, the purpose of a deep, data-driven app is to navigate through organizational categories
+to the detail level, where data can be viewed and managed. Minimize perceived navigation effort by
+keeping your apps shallow.</p>
+<p>Even though the number of vertical navigation steps from the top level down to the detail views is
+typically dictated by the structure of your app's content, there are several ways you can cut down
+on the perception of onerous navigation.</p>
+<h4>Use tabs to combine category selection and data display</h4>
+<p>This can be successful if the categories are familiar or the number of categories is small. It has
+the advantage that a level of hierarchy is removed and data remains at the center of the user's
+attention. Navigating laterally between data-rich categories is more akin to a casual browsing
+experience than to an explicit navigation step.</p>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+<p>If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all
+items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to
+minimize navigational effort. Rule of thumb: no more than 5&ndash;7 tabs.</p>
+
+    <img src="{@docRoot}design/media/app_structure_scrolltabs.png">
+    <div class="figure-caption">
+      Google Play uses tabs to simultaneously show category choice and content. To navigate between
+      categories, users can swipe left/right on the content.
+    </div>
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are
+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.
+    </div>
+
+
+  </div>
+</div>
+
+<h4>Allow cutting through hierarchies</h4>
+<p>Take advantage of shortcuts that allow people to reach their goals quicker. To allow top-level
+invocation of actions for a data item from within list or grid views, display prominent actions
+directly on list view items using drop-downs or split list items. This lets people invoke actions on
+data without having to navigate all the way down the hierarchy.</p>
+
+<img src="{@docRoot}design/media/app_structure_shortcut_on_item.png">
+<div class="figure-caption">
+  Music allows the user to act upon a data item (song) from within the category view (album),
+  thereby removing the need to navigate all the way down to the song's detail view.
+</div>
+
+<h4>Acting upon multiple data items</h4>
+<p>Even though category views mostly serve to guide people to content detail, keep in mind that there
+are often good reasons to act on collections of data as well.</p>
+<p>For example, if you allow people to delete an item in a detail view, you should also allow them to
+delete multiple items in the category view. Analyze which detail view actions are applicable to
+collections of items. Then use multi-select to allow application of those actions to multiple items
+in a category view.</p>
+<h2 id="details">Details</h2>
+
+<p>The detail view allows you to view and act on your data. The layout of the detail view depends on
+the data type being displayed, and therefore differs widely among apps.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+<h4>Layout</h4>
+<p>Consider the activities people will perform in the detail view and arrange the layout accordingly.
+For immersive content, make use of the lights-out mode to allow for distraction-free viewing of
+full-screen content.</p>
+
+    <img src="{@docRoot}design/media/app_structure_people_detail.png">
+
+  </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 is all about replicating the experience of reading an actual book.
+      The page-flip animation reinforces that notion. To create an immersive experience the app
+      enters lights-out mode, which hides all system UI affordances.
+    </div>
+
+    <div class="figure-caption">
+      The purpose of the People app's detail view is to surface communication options. The list view
+      allows for efficient scanning and quick access of phone numbers, email addresses and other
+      information items. Split items are used to combine calling and messaging into one compact line
+      item.
+    </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
+between items from within the detail view. Use swipe views or other techniques, such as filmstrips,
+to achieve this.</p>
+
+<img src="{@docRoot}design/media/app_structure_gmail_swipe.png">
+<div class="figure-caption">
+  Gmail using swipe views to navigate from detail view to detail view.
+</div>
+
+<img src="{@docRoot}design/media/app_structure_gallery_filmstrip.png">
+<div class="figure-caption">
+  In addition to supporting swipe gestures to move left or right through images, Gallery provides a
+  filmstrip control that lets people quickly jump to specific images.
+</div>
+
+<h2 id="checklist">Checklist</h2>
+
+<ul>
+<li>
+<p>Find ways to display useful content on your start screen.</p>
+</li>
+<li>
+<p>Use action bars to provide consistent navigation.</p>
+</li>
+<li>
+<p>Keep your hierarchies shallow by using horizontal navigation and shortcuts.</p>
+</li>
+<li>
+<p>Use multi-select to allow the user to act on collections of data.</p>
+</li>
+<li>
+<p>Allow for quick navigation between detail items with swipe views.</p>
+</li>
+</ul>
diff --git a/docs/html/design/patterns/compatibility.html b/docs/html/design/patterns/compatibility.html
deleted file mode 100644
index d6e59f5..0000000
--- a/docs/html/design/patterns/compatibility.html
+++ /dev/null
@@ -1,218 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Backwards Compatibility
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Backwards Compatibility</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Significant changes in Android 3.0 included:</p>
-<ul>
-<li>Deprecation of navigation hardware keys (Back, Menu, Search, Home) in favor of handling navigation
-  via virtual controls (Back, Home, Recents).</li>
-<li>Robust pattern for the use of menus in action bars.</li>
-</ul>
-<p>Android 4.0 brings these changes for tablets to the phone platform.</p>
-
-<h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>Phones with virtual navigation controls</h4>
-<p>Android apps written for Android 3.0 and later display actions in the action bar. Actions that don't
-fit in the action bar or aren't important enough to be displayed at the top level appear in the
-action overflow.</p>
-<p>Users access the action overflow by touching it in the action bar.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/compatibility_virtual_nav.png">
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>Phones with physical navigation keys</h4>
-<p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at
-the bottom of the screen. Instead, the action overflow is available from the menu hardware key. The
-resulting actions popup has the same style as in the previous example, but is displayed at the bottom of the screen.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/compatibility_physical_buttons.png">
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>Legacy apps on phones with virtual navigation controls</h4>
-<p>When you run an app that was built for Android 2.3 or earlier on a phone with virtual navigation
-controls, an action overflow control appears at the right side of the virtual navigation bar. You
-can touch the control to display the app's actions in the traditional Android menu styling.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/compatibility_legacy_apps.png">
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/compatibility.jd b/docs/html/design/patterns/compatibility.jd
new file mode 100644
index 0000000..84ae337
--- /dev/null
+++ b/docs/html/design/patterns/compatibility.jd
@@ -0,0 +1,61 @@
+page.title=Backwards Compatibility
+@jd:body
+
+<p>Significant changes in Android 3.0 included:</p>
+<ul>
+<li>Deprecation of navigation hardware keys (Back, Menu, Search, Home) in favor of handling navigation
+  via virtual controls (Back, Home, Recents).</li>
+<li>Robust pattern for the use of menus in action bars.</li>
+</ul>
+<p>Android 4.0 brings these changes for tablets to the phone platform.</p>
+
+<h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>Phones with virtual navigation controls</h4>
+<p>Android apps written for Android 3.0 and later display actions in the action bar. Actions that don't
+fit in the action bar or aren't important enough to be displayed at the top level appear in the
+action overflow.</p>
+<p>Users access the action overflow by touching it in the action bar.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/compatibility_virtual_nav.png">
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>Phones with physical navigation keys</h4>
+<p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at
+the bottom of the screen. Instead, the action overflow is available from the menu hardware key. The
+resulting actions popup has the same style as in the previous example, but is displayed at the bottom of the screen.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/compatibility_physical_buttons.png">
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>Legacy apps on phones with virtual navigation controls</h4>
+<p>When you run an app that was built for Android 2.3 or earlier on a phone with virtual navigation
+controls, an action overflow control appears at the right side of the virtual navigation bar. You
+can touch the control to display the app's actions in the traditional Android menu styling.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/compatibility_legacy_apps.png">
+
+  </div>
+</div>
diff --git a/docs/html/design/patterns/gestures.html b/docs/html/design/patterns/gestures.html
deleted file mode 100644
index c88817f..0000000
--- a/docs/html/design/patterns/gestures.html
+++ /dev/null
@@ -1,272 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Gestures
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Gestures</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<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="layout-content-row">
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/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>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/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>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/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>
-
-  </div>
-</div>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/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>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/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>
-
-  </div>
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/gesture_pinchopen.png">
-
-<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>
-
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
-
-    <img src="../static/content/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>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd
new file mode 100644
index 0000000..9868df2
--- /dev/null
+++ b/docs/html/design/patterns/gestures.jd
@@ -0,0 +1,115 @@
+page.title=Gestures
+@jd:body
+
+<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="layout-content-row">
+  <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>
+
+  </div>
+  <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>
+
+  </div>
+  <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>
+
+  </div>
+</div>
+
+
+<div class="layout-content-row">
+  <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>
+
+  </div>
+  <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>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/gesture_pinchopen.png">
+
+<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>
+
+
+<div class="layout-content-row">
+  <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>
+
+  </div>
+</div>
diff --git a/docs/html/design/patterns/index.html b/docs/html/design/patterns/index.html
deleted file mode 100644
index 863baa9..0000000
--- a/docs/html/design/patterns/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Design Patterns
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-<style>
-#landing-graphic-container {
-  position: relative;
-}
-
-#text-overlay {
-  position: absolute;
-  left: 10px;
-  top: 492px;
-  width: 200px;
-}
-</style>
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-<div class="layout-content-row content-header just-links">
-  <div class="layout-content-col span-9">&nbsp;</div>
-  <div class="paging-links layout-content-col span-4">
-    <a href="#" class="prev-page-link">Previous</a>
-    <a href="#" class="next-page-link">Next</a>
-  </div>
-</div>
-
-
-          
-
-<div id="landing-graphic-container">
-  <div id="text-overlay">
-    Design apps that behave in a consistent, predictable fashion.
-    <br><br>
-    <a href="../patterns/new-4-0.html" class="landing-page-link">New in Android 4.0</a>
-  </div>
-
-  <a href="../patterns/new-4-0.html">
-    <img src="../static/content/patterns_landing.png">
-  </a>
-</div>
-
-
-
-          
-
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/index.jd b/docs/html/design/patterns/index.jd
new file mode 100644
index 0000000..732e4db
--- /dev/null
+++ b/docs/html/design/patterns/index.jd
@@ -0,0 +1,29 @@
+page.title=Patterns
+header.justLinks=1
+footer.hide=1
+@jd:body
+
+<style>
+#landing-graphic-container {
+  position: relative;
+}
+
+#text-overlay {
+  position: absolute;
+  left: 10px;
+  top: 492px;
+  width: 200px;
+}
+</style>
+
+<div id="landing-graphic-container">
+  <div id="text-overlay">
+    Design apps that behave in a consistent, predictable fashion.
+    <br><br>
+    <a href="{@docRoot}design/patterns/new-4-0.html" class="landing-page-link">New in Android 4.0</a>
+  </div>
+
+  <a href="{@docRoot}design/patterns/new-4-0.html">
+    <img src="{@docRoot}design/media/patterns_landing.png">
+  </a>
+</div>
diff --git a/docs/html/design/patterns/multi-pane-layouts.html b/docs/html/design/patterns/multi-pane-layouts.html
deleted file mode 100644
index 7925c98..0000000
--- a/docs/html/design/patterns/multi-pane-layouts.html
+++ /dev/null
@@ -1,267 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Multi-pane Layouts
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Multi-pane Layouts</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>When writing an app for Android, keep in mind that Android devices come in many different screen
-sizes and types. Make sure that your app consistently provides a balanced and aesthetically pleasing
-layout by adjusting its content to varying screen sizes and orientations.</p>
-<p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into
-one compound view when a lot of horizontal screen real estate is available and by splitting them up
-when less space is available.</p>
-<h2 id="combining-views">Combining Multiple Views Into One</h2>
-
-<p>On smaller devices your content is typically divided into a master grid or list view and a detail
-view. Touching an item in the master view opens a different screen showing that item's detail
-information.</p>
-
-<img src="../static/content/multipane_views.png">
-
-<p>Because tablets have more screen real estate than phones, you can use panels to combine the related
-list and detail views into a single compound view. This uses the additional space more efficiently
-and makes navigating the app easier. </p>
-
-<img src="../static/content/multipane_view_tablet.png">
-
-<p>In general, use the pane on the right to present more information about the item you selected in the
-left pane. Make sure to keep the item in the left pane selected in order to establish the
-relationship between the panels.</p>
-<h2 id="orientation">Compound Views and Orientation Changes</h2>
-
-<p>Screens should have the same functionality regardless of orientation. If you use a compound view in
-one orientation, don't split it up when the user rotates the screen. There are several techniques
-you can use to adjust the layout after orientation change while keeping functional parity intact.</p>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/multipane_stretch.png">
-    
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Stretch/compress</h4>
-<p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/multipane_stack.png">
-    
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Stack</h4>
-<p>Rearrange the panels on your screen to match the orientation.</p>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/multipane_expand.png">
-    
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Expand/collapse</h4>
-<p>When the device rotates, collapse the left pane view to only show the most important information.
-Provide an <em>expand</em> control that allows the user to bring the left pane content back to its original
-width and vice versa.</p>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/multipane_show.png">
-    
-  </div>
-  <div class="layout-content-col span-5">
-
-<h4>Show/hide</h4>
-<p>After rotating the device, show the right pane in fullscreen view. Use the Up icon in the action bar
-to show the left panel and allow navigation to a different email. Hide the left panel by touching
-the content in the detail panel.</p>
-
-  </div>
-</div>
-
-<h2 id="checklist">Checklist</h2>
-
-<ul>
-<li>
-<p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p>
-</li>
-<li>
-<p>Identify the most appropriate method for the panels in your compound views to reorganize
-  themselves when screen orientation changes.</p>
-</li>
-<li>
-<p>Look for opportunities to consolidate your views into multi-panel compound views.</p>
-</li>
-<li>
-<p>Make sure that your screens provide functional parity after the screen orientation
-  changes.</p>
-</li>
-</ul>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd
new file mode 100644
index 0000000..0e63e32
--- /dev/null
+++ b/docs/html/design/patterns/multi-pane-layouts.jd
@@ -0,0 +1,110 @@
+page.title=Multi-pane Layouts
+@jd:body
+
+<p>When writing an app for Android, keep in mind that Android devices come in many different screen
+sizes and types. Make sure that your app consistently provides a balanced and aesthetically pleasing
+layout by adjusting its content to varying screen sizes and orientations.</p>
+<p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into
+one compound view when a lot of horizontal screen real estate is available and by splitting them up
+when less space is available.</p>
+<h2 id="combining-views">Combining Multiple Views Into One</h2>
+
+<p>On smaller devices your content is typically divided into a master grid or list view and a detail
+view. Touching an item in the master view opens a different screen showing that item's detail
+information.</p>
+
+<img src="{@docRoot}design/media/multipane_views.png">
+
+<p>Because tablets have more screen real estate than phones, you can use panels to combine the related
+list and detail views into a single compound view. This uses the additional space more efficiently
+and makes navigating the app easier. </p>
+
+<img src="{@docRoot}design/media/multipane_view_tablet.png">
+
+<p>In general, use the pane on the right to present more information about the item you selected in the
+left pane. Make sure to keep the item in the left pane selected in order to establish the
+relationship between the panels.</p>
+<h2 id="orientation">Compound Views and Orientation Changes</h2>
+
+<p>Screens should have the same functionality regardless of orientation. If you use a compound view in
+one orientation, don't split it up when the user rotates the screen. There are several techniques
+you can use to adjust the layout after orientation change while keeping functional parity intact.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/multipane_stretch.png">
+    
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Stretch/compress</h4>
+<p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/multipane_stack.png">
+    
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Stack</h4>
+<p>Rearrange the panels on your screen to match the orientation.</p>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/multipane_expand.png">
+    
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Expand/collapse</h4>
+<p>When the device rotates, collapse the left pane view to only show the most important information.
+Provide an <em>expand</em> control that allows the user to bring the left pane content back to its original
+width and vice versa.</p>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/multipane_show.png">
+    
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Show/hide</h4>
+<p>After rotating the device, show the right pane in fullscreen view. Use the Up icon in the action bar
+to show the left panel and allow navigation to a different email. Hide the left panel by touching
+the content in the detail panel.</p>
+
+  </div>
+</div>
+
+<h2 id="checklist">Checklist</h2>
+
+<ul>
+<li>
+<p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p>
+</li>
+<li>
+<p>Identify the most appropriate method for the panels in your compound views to reorganize
+  themselves when screen orientation changes.</p>
+</li>
+<li>
+<p>Look for opportunities to consolidate your views into multi-panel compound views.</p>
+</li>
+<li>
+<p>Make sure that your screens provide functional parity after the screen orientation
+  changes.</p>
+</li>
+</ul>
diff --git a/docs/html/design/patterns/navigation.html b/docs/html/design/patterns/navigation.html
deleted file mode 100644
index 5d1568e..0000000
--- a/docs/html/design/patterns/navigation.html
+++ /dev/null
@@ -1,275 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Navigation with Back and Up
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Navigation with Back and Up</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Consistent navigation is an essential component of the overall user experience. Few things frustrate
-users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0
-introduced significant changes to the global navigation behavior. Thoughtfully following the
-guidelines for Back and Up will make your app's navigation predictable and reliable for your users.</p>
-<p>Android 2.3 and earlier relied upon the system <em>Back</em> button for supporting navigation within an
-app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared:
-the <em>Up</em> button, consisting of the app icon and a left-point caret.</p>
-
-<img src="../static/content/navigation_with_back_and_up.png">
-
-<h2 id="up-vs-back">Up vs. Back</h2>
-
-<p>The Up button is used to navigate within an application based on the hierarchical relationships
-between screens. For instance, if screen A displays a list of items, and selecting an item leads to
-screen B (which presents that item in more detail), then screen B should offer an Up button that
-returns to screen A.</p>
-<p>If a screen is the topmost one in an app (i.e. the home of the app), it should not present an Up
-button.</p>
-<p>The system Back key is used to navigate based on the history of screens the user has recently seen,
-in reverse chronological order&mdash;in effect, the temporal relationships between screens.</p>
-<p>When the previously viewed screen is also the hierarchical parent of the current screen, pressing
-the Back key will have the same result as pressing an Up button -- this is a common occurrence.
-However, unlike the Up button, which ensures the user remains within your app, the Back key can
-return the user to the Home screen, or even to a different application.</p>
-
-<img src="../static/content/navigation_up_vs_back_gmail.png">
-
-<p>The Back key also supports a few behaviors not directly tied to screen-to-screen navigation:</p>
-<ul>
-<li>Back dismisses floating windows (dialogs, popups)</li>
-<li>Back dismisses contextual action bars, and removes the highlight from the selected items</li>
-<li>Back hides the onscreen keyboard (IME)</li>
-</ul>
-<h2 id="within-app">Navigation Within Your App</h2>
-
-<h4>Navigating to screens with multiple entry points</h4>
-<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached
-from multiple entry points&mdash;e.g., a settings screen which can be navigated to from any screen
-in your app. In this case, the Up button should choose to return to the referring screen, behaving
-identically to Back.</p>
-<h4>Changing view within a screen</h4>
-<p>Changing view options for a screen does not change the behavior of Up or Back: the screen is still
-in the same place within the app's hierarchy, and no new navigation history is created.</p>
-<p>Examples of such view changes are:</p>
-<ul>
-<li>Switching views using tabs and/or left-and-right swipes</li>
-<li>Switching views using a dropdown (aka collapsed tabs)</li>
-<li>Filtering a list</li>
-<li>Sorting a list</li>
-<li>Changing display characteristics (e.g. zooming)</li>
-</ul>
-<h4>Navigating between sibling screens</h4>
-<p>When your app supports navigation from a list of items to a detail view of one of those items, it's
-often desirable to support direction navigation from that item to another one which precedes or
-follows it in the list. For example, in Gmail, it's easy to swipe left or right from a conversation
-to view a newer or older one in the same Inbox. Just as when changing view within a screen, such
-navigation does not change the behavior of Up or Back.</p>
-
-<img src="../static/content/navigation_between_siblings_gmail.png">
-
-<p>However, a notable exception to this occurs when browsing between "related" detail views not tied
-together by the referring list&mdash;for example, when browsing on Google Play between apps from
-the same developer, or albums by the same artist. In these cases, following each link does create
-history, causing the Back button to step through each screen of related content which has been
-viewed. Up should continue to bypass these related screens and navigate to the most recently viewed
-container screen.</p>
-
-<img src="../static/content/navigation_between_siblings_market1.png">
-
-<p>You have the ability to make the Up behavior even smarter based on your knowledge of detail
-view. If we extend our Google Play sample from above, imagine the user has navigated from the last Book
-viewed to the details for the Movie adaptation. In that case, Up can return to a container (Movies)
-which the user had not previously navigated through.</p>
-
-<img src="../static/content/navigation_between_siblings_market2.png">
-
-<h2 id="from-outside">Navigation From Outside Your App</h2>
-
-<p>There are two categories of navigation from outside your app to screens deep within the app's
-hierarchy:</p>
-<ul>
-<li>App-to-app navigation, such as via intent completion.</li>
-<li>System-to-app navigation, such as via notifications and home screen widgets.</li>
-</ul>
-<p>Gmail provides examples of each of these. For app-to-app navigation, a "Share" intent goes directly
-to the compose screen. For system-to-app navigation, both a new message notification and a home
-screen widget can bypass the Inbox screen, taking the user directly to a conversation view.</p>
-<h4>App-to-app navigation</h4>
-<p>When navigating deep into your app's hierarchy directly from another app via an intent, Back will
-return to the referring app.</p>
-<p>The Up button is handled as follows:
-- If the destination screen is typically reached from one particular screen within your app, Up
-  should navigate to that screen.
-- Otherwise, Up should navigate to the topmost ("Home") screen of your app.</p>
-<p>For example, after choosing to share a book being viewed on Google Play, the user navigates directly to
-Gmail's compose screen. From there, Up returns to the Inbox (which happens to be both the
-typical referrer to compose, as well as the topmost screen of the app), while Back returns to
-Google Play.</p>
-
-<img src="../static/content/navigation_from_outside_up.png">
-
-<h4>System-to-app navigation</h4>
-<p>If your app was reached via the system mechanisms of notifications or home screen widgets, Up
-behaves as described for app-to-app navigation, above.</p>
-<p>For the Back key, you should make navigation more predictably by inserting into the task's back
-stack the complete upward navigation path to the app's topmost screen. This way, a user who has
-forgotten how they entered your app can safely navigate to the app's topmost screen before exiting
-it.</p>
-<p>For example, Gmail's Home screen widget has a button for diving directly to its compose screen.
-After following that path, the Back key first returns to the Inbox, and from there continues to
-Home.</p>
-
-<img src="../static/content/navigation_from_outside_back.png">
-
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/navigation.jd b/docs/html/design/patterns/navigation.jd
new file mode 100644
index 0000000..d35cd82
--- /dev/null
+++ b/docs/html/design/patterns/navigation.jd
@@ -0,0 +1,116 @@
+page.title=Navigation with Back and Up
+@jd:body
+
+<p>Consistent navigation is an essential component of the overall user experience. Few things frustrate
+users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0
+introduced significant changes to the global navigation behavior. Thoughtfully following the
+guidelines for Back and Up will make your app's navigation predictable and reliable for your users.</p>
+<p>Android 2.3 and earlier relied upon the system <em>Back</em> button for supporting navigation within an
+app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared:
+the <em>Up</em> button, consisting of the app icon and a left-point caret.</p>
+
+<img src="{@docRoot}design/media/navigation_with_back_and_up.png">
+
+<h2 id="up-vs-back">Up vs. Back</h2>
+
+<p>The Up button is used to navigate within an application based on the hierarchical relationships
+between screens. For instance, if screen A displays a list of items, and selecting an item leads to
+screen B (which presents that item in more detail), then screen B should offer an Up button that
+returns to screen A.</p>
+<p>If a screen is the topmost one in an app (i.e. the home of the app), it should not present an Up
+button.</p>
+<p>The system Back key is used to navigate based on the history of screens the user has recently seen,
+in reverse chronological order&mdash;in effect, the temporal relationships between screens.</p>
+<p>When the previously viewed screen is also the hierarchical parent of the current screen, pressing
+the Back key will have the same result as pressing an Up button -- this is a common occurrence.
+However, unlike the Up button, which ensures the user remains within your app, the Back key can
+return the user to the Home screen, or even to a different application.</p>
+
+<img src="{@docRoot}design/media/navigation_up_vs_back_gmail.png">
+
+<p>The Back key also supports a few behaviors not directly tied to screen-to-screen navigation:</p>
+<ul>
+<li>Back dismisses floating windows (dialogs, popups)</li>
+<li>Back dismisses contextual action bars, and removes the highlight from the selected items</li>
+<li>Back hides the onscreen keyboard (IME)</li>
+</ul>
+<h2 id="within-app">Navigation Within Your App</h2>
+
+<h4>Navigating to screens with multiple entry points</h4>
+<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached
+from multiple entry points&mdash;e.g., a settings screen which can be navigated to from any screen
+in your app. In this case, the Up button should choose to return to the referring screen, behaving
+identically to Back.</p>
+<h4>Changing view within a screen</h4>
+<p>Changing view options for a screen does not change the behavior of Up or Back: the screen is still
+in the same place within the app's hierarchy, and no new navigation history is created.</p>
+<p>Examples of such view changes are:</p>
+<ul>
+<li>Switching views using tabs and/or left-and-right swipes</li>
+<li>Switching views using a dropdown (aka collapsed tabs)</li>
+<li>Filtering a list</li>
+<li>Sorting a list</li>
+<li>Changing display characteristics (e.g. zooming)</li>
+</ul>
+<h4>Navigating between sibling screens</h4>
+<p>When your app supports navigation from a list of items to a detail view of one of those items, it's
+often desirable to support direction navigation from that item to another one which precedes or
+follows it in the list. For example, in Gmail, it's easy to swipe left or right from a conversation
+to view a newer or older one in the same Inbox. Just as when changing view within a screen, such
+navigation does not change the behavior of Up or Back.</p>
+
+<img src="{@docRoot}design/media/navigation_between_siblings_gmail.png">
+
+<p>However, a notable exception to this occurs when browsing between "related" detail views not tied
+together by the referring list&mdash;for example, when browsing on Google Play between apps from
+the same developer, or albums by the same artist. In these cases, following each link does create
+history, causing the Back button to step through each screen of related content which has been
+viewed. Up should continue to bypass these related screens and navigate to the most recently viewed
+container screen.</p>
+
+<img src="{@docRoot}design/media/navigation_between_siblings_market1.png">
+
+<p>You have the ability to make the Up behavior even smarter based on your knowledge of detail
+view. If we extend our Google Play sample from above, imagine the user has navigated from the last Book
+viewed to the details for the Movie adaptation. In that case, Up can return to a container (Movies)
+which the user had not previously navigated through.</p>
+
+<img src="{@docRoot}design/media/navigation_between_siblings_market2.png">
+
+<h2 id="from-outside">Navigation From Outside Your App</h2>
+
+<p>There are two categories of navigation from outside your app to screens deep within the app's
+hierarchy:</p>
+<ul>
+<li>App-to-app navigation, such as via intent completion.</li>
+<li>System-to-app navigation, such as via notifications and home screen widgets.</li>
+</ul>
+<p>Gmail provides examples of each of these. For app-to-app navigation, a "Share" intent goes directly
+to the compose screen. For system-to-app navigation, both a new message notification and a home
+screen widget can bypass the Inbox screen, taking the user directly to a conversation view.</p>
+<h4>App-to-app navigation</h4>
+<p>When navigating deep into your app's hierarchy directly from another app via an intent, Back will
+return to the referring app.</p>
+<p>The Up button is handled as follows:
+- If the destination screen is typically reached from one particular screen within your app, Up
+  should navigate to that screen.
+- Otherwise, Up should navigate to the topmost ("Home") screen of your app.</p>
+<p>For example, after choosing to share a book being viewed on Google Play, the user navigates directly to
+Gmail's compose screen. From there, Up returns to the Inbox (which happens to be both the
+typical referrer to compose, as well as the topmost screen of the app), while Back returns to
+Google Play.</p>
+
+<img src="{@docRoot}design/media/navigation_from_outside_up.png">
+
+<h4>System-to-app navigation</h4>
+<p>If your app was reached via the system mechanisms of notifications or home screen widgets, Up
+behaves as described for app-to-app navigation, above.</p>
+<p>For the Back key, you should make navigation more predictably by inserting into the task's back
+stack the complete upward navigation path to the app's topmost screen. This way, a user who has
+forgotten how they entered your app can safely navigate to the app's topmost screen before exiting
+it.</p>
+<p>For example, Gmail's Home screen widget has a button for diving directly to its compose screen.
+After following that path, the Back key first returns to the Inbox, and from there continues to
+Home.</p>
+
+<img src="{@docRoot}design/media/navigation_from_outside_back.png">
diff --git a/docs/html/design/patterns/new-4-0.html b/docs/html/design/patterns/new-4-0.html
deleted file mode 100644
index 2e2cbc2..0000000
--- a/docs/html/design/patterns/new-4-0.html
+++ /dev/null
@@ -1,228 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - New in Android 4.0
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>New in Android 4.0</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Navigation bar</h4>
-<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="../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="../static/content/whats_new_nav_bar.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Action bar</h4>
-<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="../static/content/whats_new_action_bar.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Multi-pane layouts</h4>
-<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="../static/content/whats_new_multipanel.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Selection</h4>
-<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="../static/content/whats_new_multiselect.png">
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/new-4-0.jd b/docs/html/design/patterns/new-4-0.jd
new file mode 100644
index 0000000..91ebba7
--- /dev/null
+++ b/docs/html/design/patterns/new-4-0.jd
@@ -0,0 +1,71 @@
+page.title=New in Android 4.0
+@jd:body
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Navigation bar</h4>
+<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">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Action bar</h4>
+<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">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Multi-pane layouts</h4>
+<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">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Selection</h4>
+<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">
+
+  </div>
+</div>
diff --git a/docs/html/design/patterns/notifications.html b/docs/html/design/patterns/notifications.html
deleted file mode 100644
index 99af418..0000000
--- a/docs/html/design/patterns/notifications.html
+++ /dev/null
@@ -1,394 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Notifications
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Notifications</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>The notification system allows your app to keep the user informed about important events, such as
-new messages in a chat app or a calendar event.</p>
-<p>To create an app that feels streamlined, pleasant, and respectful, it is important to design your
-notifications carefully. Notifications embody your app's voice, and contribute to your app's
-personality. Unwanted or unimportant notifications can annoy the user, so use them judiciously.</p>
-<h4>When to display a notification</h4>
-<p>To create an application that people love, it's important to recognize that the user's attention and
-focus is a resource that must be protected. To use an analogy that might resonate with software
-developers, the user is not a method that can be invoked to return a value.  The user's focus is a
-resource more akin to a thread, and creating a notification momentarily blocks the user thread as
-they process and then dismiss the interruptive notification.</p>
-<p>Android's notification system has been designed to quickly inform users of events while they focus
-on a task, but it is nonetheless still important to be conscientious when deciding to create a
-notification.</p>
-<p>While well behaved apps generally only speak when spoken to, there are some limited cases where an
-app actually should interrupt the user with an unprompted notification.</p>
-<p>Notifications should be used primarily for <strong>time sensitive events</strong>, and especially if these
-synchronous events <strong>involve other people</strong>. For instance, an incoming chat is a real time and
-synchronous form of communication: there is another user actively waiting on you to respond.
-Calendar events are another good example of when to use a notification and grab the user's
-attention, because the event is imminent, and calendar events often involve other people.</p>
-
-<img src="../static/content/notifications_pattern_real_time_people.png">
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>When not to display a notification</h4>
-<p>There are however many other cases where notifications should not be used:</p>
-<ul>
-<li>
-<p>Don't notify the user of information that is not directed specifically at them, or information
-that is not truly time sensitive.  For instance the asynchronous and undirected updates flowing
-through a social network do not warrant a real time interruption.</p>
-</li>
-<li>
-<p>Don't create a notification if the relevant new information is currently on screen. Instead, use
-the UI of the application itself to notify the user of new information directly in context. For
-instance, a chat application should not create system notifications while the user is actively
-chatting with another user.</p>
-</li>
-<li>
-<p>Don't interrupt the user for low level technical operations, like saving or syncing information,
-or updating an application, if it is possible for the system to simply take care of itself without
-involving the user.</p>
-</li>
-<li>
-<p>Don't interrupt the user to inform them of an error if it is possible for the application to
-quickly recover from the error on its own without the user taking any action.</p>
-</li>
-<li>
-<p>Don't use notifications for services that the user cannot manually start or stop.</p>
-</li>
-<li>
-<p>Don't create superfluous notifications just to get your brand in front of users. Such
-notifications will only frustrate and likely alienate your audience. The best way to provide the
-user with a small amount of updated information and to keep them engaged with your application is to
-develop a widget that they can choose to place on their home screen.</p>
-</li>
-</ul>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/notifications_pattern_social_fail.png">
-
-  </div>
-</div>
-
-<h2 id="design-guidelines">Design Guidelines</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/notifications_pattern_anatomy.png">
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<h4>Make it personal</h4>
-<p>For notifications of items sent by another user (such as a message or status update), include that
-person's image.</p>
-<p>Remember to include the app icon as a secondary icon in the notification, so that the user can
-still identify which app posted it.</p>    
-
-  </div>
-</div>
-
-<h4>Navigate to the right place</h4>
-<p>When the user touches a notification, be open your app to the place where the user can consume and
-act upon the data referenced in the notification. In most cases this will be the detail view of a
-single data item (e.g. a message), but it might also be a summary view if the notification is
-stacked (see <em>Stacked notifications</em> below) and references multiple items. If in any of those cases
-the user is taken to a hierarchy level below your app's top-level, insert navigation into your app's
-back stack to allow them to navigate to your app's top level using the system back key. For more
-information, see the chapter on <em>System-to-app navigation</em> in the
-<a href="../patterns/navigation.html">Navigation</a> design pattern.</p>
-<h4>Timestamps for time sensitive events</h4>
-<p>By default, standard Android notifications include a timestamp in the upper right corner. Consider
-whether the timestamp is valuable in the context of your notification. If the timestamp is not
-valuable, consider if the event is important enough to warrant grabbing the user's attention with a
-notification. If the notification is important enough, decide if you would like to opt out of
-displaying the timestamp.</p>
-<p>Include a timestamp if the user likely needs to know how long ago the notification occurred. Good
-candidates for timestamps include communication notifications (email, messaging, chat, voicemail)
-where the user may need the timestamp information to understand the context of a message or to
-tailor a response.</p>
-<h4>Stack your notifications</h4>
-<p>If your app creates a notification while another of the same type is still pending, avoid creating
-an altogether new notification object. Instead, stack the notification.</p>
-<p>A stacked notification builds a summary description and allows the user to understand how many
-notifications of a particular kind are pending.</p>
-<p><strong>Don't</strong>:</p>
-
-<img src="../static/content/notifications_pattern_additional_fail.png">
-
-<p><strong>Do</strong>:</p>
-
-<img src="../static/content/notifications_pattern_additional_win.png">
-
-<p>If you keep the summary and detail information on different screens, a stacked notification may need
-to open to a different place in the app than a single notification.</p>
-<p>For example, a single email notification should always open to the content of the email, whereas a
-stacked email notification opens to the Inbox view.</p>
-<h4>Clean up after yourself</h4>
-<p>Just like calendar events, some notifications alert the user to an event that happens at a
-particular point in time. After that moment has passed, the notification is likely not important to
-the user anymore, and you should consider removing it automatically.  The same is true for active
-chat conversations or voicemail messages the user has listened to, users should not have to manually
-dismiss notifications independently from taking action on them.</p>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Provide a peek into your notification</h4>
-<p>You can provide a short preview of your notification's content by providing optional ticker text.
-The ticker text is shown for a short amount of time when the notification enters the system and then
-hides automatically.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/notifications_pattern_phone_ticker.png">
-
-  </div>
-</div>
-
-<h4>Make notifications optional</h4>
-<p>Users should always be in control of notifications. Allow the user to silence the notifications from
-your app by adding a notification settings item to your application settings.</p>
-<h4>Use distinct icons</h4>
-<p>By glancing at the notification area, the user should be able to discern what notification types are
-currently pending.</p>
-<p><strong>Do</strong>:</p>
-<ul>
-<li>Look at the notification icons the Android apps already provide and create notification icons for
-  your app that are sufficiently distinct in appearance.</li>
-</ul>
-<p><strong>Don't</strong>:</p>
-<ul>
-<li>Use color to distinguish your app from others. Notification icons should generally be monochrome.</li>
-</ul>
-
-<h2 id="interacting-with-notifications">Interacting With Notifications</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/notifications_pattern_phone_icons.png">
-
-  </div>
-  <div class="layout-content-col span-6">
-
-<p>Notifications are indicated by icons in the notification area and can be accessed by opening the
-notification drawer.</p>
-<p>Inside the drawer, notifications are chronologically sorted with the latest one on top. Touching a
-notification opens the associated app to detailed content matching the notification. Swiping left or
-right on a notification removes it from the drawer.</p>
-
-  </div>
-</div>
-
-<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>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/notifications_pattern_tablet.png">
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-    <img src="../static/content/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">
-  <div class="layout-content-col span-12">
-
-<h4>Dialogs and toasts are for feedback not notification</h4>
-<p>Your app should not create a dialog or toast if it is not currently on screen. Dialogs and Toasts
-should only be displayed as the immediate response to the user taking an action inside of your app.
-For instance, dialogs can be used to confirm that the user understands the severity of an action,
-and toasts can echo back that an action has been successfully taken.</p>
-
-  </div>
-</div>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<img src="../static/content/notifications_pattern_dialog_toast.png">
-
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd
new file mode 100644
index 0000000..ad88a01
--- /dev/null
+++ b/docs/html/design/patterns/notifications.jd
@@ -0,0 +1,236 @@
+page.title=Notifications
+@jd:body
+
+<p>The notification system allows your app to keep the user informed about important events, such as
+new messages in a chat app or a calendar event.</p>
+<p>To create an app that feels streamlined, pleasant, and respectful, it is important to design your
+notifications carefully. Notifications embody your app's voice, and contribute to your app's
+personality. Unwanted or unimportant notifications can annoy the user, so use them judiciously.</p>
+<h4>When to display a notification</h4>
+<p>To create an application that people love, it's important to recognize that the user's attention and
+focus is a resource that must be protected. To use an analogy that might resonate with software
+developers, the user is not a method that can be invoked to return a value.  The user's focus is a
+resource more akin to a thread, and creating a notification momentarily blocks the user thread as
+they process and then dismiss the interruptive notification.</p>
+<p>Android's notification system has been designed to quickly inform users of events while they focus
+on a task, but it is nonetheless still important to be conscientious when deciding to create a
+notification.</p>
+<p>While well behaved apps generally only speak when spoken to, there are some limited cases where an
+app actually should interrupt the user with an unprompted notification.</p>
+<p>Notifications should be used primarily for <strong>time sensitive events</strong>, and especially if these
+synchronous events <strong>involve other people</strong>. For instance, an incoming chat is a real time and
+synchronous form of communication: there is another user actively waiting on you to respond.
+Calendar events are another good example of when to use a notification and grab the user's
+attention, because the event is imminent, and calendar events often involve other people.</p>
+
+<img src="{@docRoot}design/media/notifications_pattern_real_time_people.png">
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>When not to display a notification</h4>
+<p>There are however many other cases where notifications should not be used:</p>
+<ul>
+<li>
+<p>Don't notify the user of information that is not directed specifically at them, or information
+that is not truly time sensitive.  For instance the asynchronous and undirected updates flowing
+through a social network do not warrant a real time interruption.</p>
+</li>
+<li>
+<p>Don't create a notification if the relevant new information is currently on screen. Instead, use
+the UI of the application itself to notify the user of new information directly in context. For
+instance, a chat application should not create system notifications while the user is actively
+chatting with another user.</p>
+</li>
+<li>
+<p>Don't interrupt the user for low level technical operations, like saving or syncing information,
+or updating an application, if it is possible for the system to simply take care of itself without
+involving the user.</p>
+</li>
+<li>
+<p>Don't interrupt the user to inform them of an error if it is possible for the application to
+quickly recover from the error on its own without the user taking any action.</p>
+</li>
+<li>
+<p>Don't use notifications for services that the user cannot manually start or stop.</p>
+</li>
+<li>
+<p>Don't create superfluous notifications just to get your brand in front of users. Such
+notifications will only frustrate and likely alienate your audience. The best way to provide the
+user with a small amount of updated information and to keep them engaged with your application is to
+develop a widget that they can choose to place on their home screen.</p>
+</li>
+</ul>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/notifications_pattern_social_fail.png">
+
+  </div>
+</div>
+
+<h2 id="design-guidelines">Design Guidelines</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/notifications_pattern_anatomy.png">
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<h4>Make it personal</h4>
+<p>For notifications of items sent by another user (such as a message or status update), include that
+person's image.</p>
+<p>Remember to include the app icon as a secondary icon in the notification, so that the user can
+still identify which app posted it.</p>    
+
+  </div>
+</div>
+
+<h4>Navigate to the right place</h4>
+<p>When the user touches a notification, be open your app to the place where the user can consume and
+act upon the data referenced in the notification. In most cases this will be the detail view of a
+single data item (e.g. a message), but it might also be a summary view if the notification is
+stacked (see <em>Stacked notifications</em> below) and references multiple items. If in any of those cases
+the user is taken to a hierarchy level below your app's top-level, insert navigation into your app's
+back stack to allow them to navigate to your app's top level using the system back key. For more
+information, see the chapter on <em>System-to-app navigation</em> in the
+<a href="{@docRoot}design/patterns/navigation.html">Navigation</a> design pattern.</p>
+<h4>Timestamps for time sensitive events</h4>
+<p>By default, standard Android notifications include a timestamp in the upper right corner. Consider
+whether the timestamp is valuable in the context of your notification. If the timestamp is not
+valuable, consider if the event is important enough to warrant grabbing the user's attention with a
+notification. If the notification is important enough, decide if you would like to opt out of
+displaying the timestamp.</p>
+<p>Include a timestamp if the user likely needs to know how long ago the notification occurred. Good
+candidates for timestamps include communication notifications (email, messaging, chat, voicemail)
+where the user may need the timestamp information to understand the context of a message or to
+tailor a response.</p>
+<h4>Stack your notifications</h4>
+<p>If your app creates a notification while another of the same type is still pending, avoid creating
+an altogether new notification object. Instead, stack the notification.</p>
+<p>A stacked notification builds a summary description and allows the user to understand how many
+notifications of a particular kind are pending.</p>
+<p><strong>Don't</strong>:</p>
+
+<img src="{@docRoot}design/media/notifications_pattern_additional_fail.png">
+
+<p><strong>Do</strong>:</p>
+
+<img src="{@docRoot}design/media/notifications_pattern_additional_win.png">
+
+<p>If you keep the summary and detail information on different screens, a stacked notification may need
+to open to a different place in the app than a single notification.</p>
+<p>For example, a single email notification should always open to the content of the email, whereas a
+stacked email notification opens to the Inbox view.</p>
+<h4>Clean up after yourself</h4>
+<p>Just like calendar events, some notifications alert the user to an event that happens at a
+particular point in time. After that moment has passed, the notification is likely not important to
+the user anymore, and you should consider removing it automatically.  The same is true for active
+chat conversations or voicemail messages the user has listened to, users should not have to manually
+dismiss notifications independently from taking action on them.</p>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4>Provide a peek into your notification</h4>
+<p>You can provide a short preview of your notification's content by providing optional ticker text.
+The ticker text is shown for a short amount of time when the notification enters the system and then
+hides automatically.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/notifications_pattern_phone_ticker.png">
+
+  </div>
+</div>
+
+<h4>Make notifications optional</h4>
+<p>Users should always be in control of notifications. Allow the user to silence the notifications from
+your app by adding a notification settings item to your application settings.</p>
+<h4>Use distinct icons</h4>
+<p>By glancing at the notification area, the user should be able to discern what notification types are
+currently pending.</p>
+<p><strong>Do</strong>:</p>
+<ul>
+<li>Look at the notification icons the Android apps already provide and create notification icons for
+  your app that are sufficiently distinct in appearance.</li>
+</ul>
+<p><strong>Don't</strong>:</p>
+<ul>
+<li>Use color to distinguish your app from others. Notification icons should generally be monochrome.</li>
+</ul>
+
+<h2 id="interacting-with-notifications">Interacting With Notifications</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/notifications_pattern_phone_icons.png">
+
+  </div>
+  <div class="layout-content-col span-6">
+
+<p>Notifications are indicated by icons in the notification area and can be accessed by opening the
+notification drawer.</p>
+<p>Inside the drawer, notifications are chronologically sorted with the latest one on top. Touching a
+notification opens the associated app to detailed content matching the notification. Swiping left or
+right on a notification removes it from the drawer.</p>
+
+  </div>
+</div>
+
+<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>
+
+  </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">
+  <div class="layout-content-col span-12">
+
+<h4>Dialogs and toasts are for feedback not notification</h4>
+<p>Your app should not create a dialog or toast if it is not currently on screen. Dialogs and Toasts
+should only be displayed as the immediate response to the user taking an action inside of your app.
+For instance, dialogs can be used to confirm that the user understands the severity of an action,
+and toasts can echo back that an action has been successfully taken.</p>
+
+  </div>
+</div>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<img src="{@docRoot}design/media/notifications_pattern_dialog_toast.png">
diff --git a/docs/html/design/patterns/pure-android.html b/docs/html/design/patterns/pure-android.html
deleted file mode 100644
index f5a8042..0000000
--- a/docs/html/design/patterns/pure-android.html
+++ /dev/null
@@ -1,292 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Pure Android
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Pure Android</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Most developers want to distribute their apps on multiple platforms. As you plan your app for
-Android, keep in mind that different platforms play by different rules and conventions. Design
-decisions that make perfect sense on one platform will look and feel misplaced in the context of a
-different platform. While a "design once, ship anywhere" approach might save you time up-front, you
-run the very real risk of creating inconsistent apps that alienate users. Consider the following
-guidelines to avoid the most common traps and pitfalls.</p>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Don't mimic UI elements from other platforms</h4>
-<p>Platforms typically provide a carefully designed set of UI elements that are themed in a very
-distinctive fashion. For example, some platforms advocate rounded corners for their buttons, others
-use gradients in their title bars. In some cases, elements may have the same purpose, but are
-designed to work a bit differently.</p>
-<p>As you build your app for Android, don't carry over themed UI elements from other platforms and
-don't mimic their specific behaviors. Review the <a href="../building-
-blocks/index.html">Building Blocks</a> section in this styleguide to learn about Android's most important UI elements
-and the way they look in the system default themes. Also examine Android's platform apps to get a
-sense of how elements are applied in the context of an app. If you want to customize the theme of UI
-elements, customize carefully according to your specific branding - and not according to the
-conventions of a different platform.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/migrating_ui_elements.png">
-    <div class="figure-caption">
-      Sampling of UI elements from Android, iOS and Windows Phone 7.
-    </div>
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Don't carry over platform-specific icons</h4>
-<p>Platforms typically provide sets of icons for common functionality, such as sharing, creating a new
-document or deleting.</p>
-<p>As you are migrating your app to Android, please swap out platform-specific icons with their Android
-counterparts.</p>
-<p>You can find a wide variety of icons for use in your app in the Android SDK.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/migrating_icons.png">
-    <div class="figure-caption">
-      Sampling of icons from Android, iOS and Windows Phone 7.
-    </div>
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Don't use bottom tab bars</h4>
-<p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention,
-Android's tabs for view control are shown in action bars at the top of the screen instead. In
-addition, Android apps may use a bottom bar to display actions on a split action bar.</p>
-<p>You should follow this guideline to create a consistent experience with other apps on the Android
-platform and to avoid confusion between actions and view switching on Android.</p>
-<p>For more information on how to properly use action bars for view control, see
-<a href="../patterns/actionbar.html">Action Bars</a>.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/migrating_ios_dialers.png">
-    <div class="figure-caption">
-      Android dialer with tabs in an action bar vs. bottom tabs in iOS.
-    </div>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Don't use labeled back buttons on action bars</h4>
-<p>Other platforms use an explicit back button with label to allow the user to navigate up the
-application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical
-navigation and the navigation bar's back button for temporal navigation. For more information,
-please review the <a href="../patterns/navigation.html">Navigation</a> pattern.</p>
-<p>Follow this guideline to provide a consistent navigation experience across the platform.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/migrating_ios_galleries.png">
-    <div class="figure-caption">
-      Android action bar with up caret vs. iOS labeled "Back" button.
-    </div>
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-<h4>Don't use right-pointing carets on line items</h4>
-<p>A common pattern on other platforms is the display of right-pointing carets on line items that allow
-the user to drill deeper into additional content.</p>
-<p>Android does not use such indicators on drill-down line items. Avoid them to stay consistent with
-the platform and in order to not have the user guess as to what the meaning of those carets may be.</p>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-    <img src="../static/content/migrating_ios_settings.png">
-    <div class="figure-caption">
-      Android settings without right-pointing carets in line items vs. iOS settings.
-    </div>
-
-  </div>
-</div>
-
-<h2 id="device-independence">Device Independence</h2>
-
-<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets
-for different screen sizes and densities and make use of concepts such as multi-pane layouts to
-appropriately scale your UI on different device form factors.</p>
-<p>For more information, read <a href="../style/devices-displays.html">Devices and Displays</a> as
-well as <a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a> in this design guide.</p>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/pure-android.jd b/docs/html/design/patterns/pure-android.jd
new file mode 100644
index 0000000..8ed1347
--- /dev/null
+++ b/docs/html/design/patterns/pure-android.jd
@@ -0,0 +1,136 @@
+page.title=Pure Android
+@jd:body
+
+<p>Most developers want to distribute their apps on multiple platforms. As you plan your app for
+Android, keep in mind that different platforms play by different rules and conventions. Design
+decisions that make perfect sense on one platform will look and feel misplaced in the context of a
+different platform. While a "design once, ship anywhere" approach might save you time up-front, you
+run the very real risk of creating inconsistent apps that alienate users. Consider the following
+guidelines to avoid the most common traps and pitfalls.</p>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Don't mimic UI elements from other platforms</h4>
+<p>Platforms typically provide a carefully designed set of UI elements that are themed in a very
+distinctive fashion. For example, some platforms advocate rounded corners for their buttons, others
+use gradients in their title bars. In some cases, elements may have the same purpose, but are
+designed to work a bit differently.</p>
+<p>As you build your app for Android, don't carry over themed UI elements from other platforms and
+don't mimic their specific behaviors. Review the
+<a href="{@docRoot}design/building-blocks/index.html">Building Blocks</a>
+section in this styleguide to learn about Android's most important UI elements
+and the way they look in the system default themes. Also examine Android's platform apps to get a
+sense of how elements are applied in the context of an app. If you want to customize the theme of UI
+elements, customize carefully according to your specific branding - and not according to the
+conventions of a different platform.</p>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/migrating_ui_elements.png">
+    <div class="figure-caption">
+      Sampling of UI elements from Android, iOS and Windows Phone 7.
+    </div>
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Don't carry over platform-specific icons</h4>
+<p>Platforms typically provide sets of icons for common functionality, such as sharing, creating a new
+document or deleting.</p>
+<p>As you are migrating your app to Android, please swap out platform-specific icons with their Android
+counterparts.</p>
+<p>You can find a wide variety of icons for use in your app in the Android SDK.</p>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/migrating_icons.png">
+    <div class="figure-caption">
+      Sampling of icons from Android, iOS and Windows Phone 7.
+    </div>
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Don't use bottom tab bars</h4>
+<p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention,
+Android's tabs for view control are shown in action bars at the top of the screen instead. In
+addition, Android apps may use a bottom bar to display actions on a split action bar.</p>
+<p>You should follow this guideline to create a consistent experience with other apps on the Android
+platform and to avoid confusion between actions and view switching on Android.</p>
+<p>For more information on how to properly use action bars for view control, see
+<a href="{@docRoot}design/patterns/actionbar.html">Action Bars</a>.</p>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/migrating_ios_dialers.png">
+    <div class="figure-caption">
+      Android dialer with tabs in an action bar vs. bottom tabs in iOS.
+    </div>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Don't use labeled back buttons on action bars</h4>
+<p>Other platforms use an explicit back button with label to allow the user to navigate up the
+application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical
+navigation and the navigation bar's back button for temporal navigation. For more information,
+please review the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern.</p>
+<p>Follow this guideline to provide a consistent navigation experience across the platform.</p>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/migrating_ios_galleries.png">
+    <div class="figure-caption">
+      Android action bar with up caret vs. iOS labeled "Back" button.
+    </div>
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+<h4>Don't use right-pointing carets on line items</h4>
+<p>A common pattern on other platforms is the display of right-pointing carets on line items that allow
+the user to drill deeper into additional content.</p>
+<p>Android does not use such indicators on drill-down line items. Avoid them to stay consistent with
+the platform and in order to not have the user guess as to what the meaning of those carets may be.</p>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+    <img src="{@docRoot}design/media/migrating_ios_settings.png">
+    <div class="figure-caption">
+      Android settings without right-pointing carets in line items vs. iOS settings.
+    </div>
+
+  </div>
+</div>
+
+<h2 id="device-independence">Device Independence</h2>
+
+<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets
+for different screen sizes and densities and make use of concepts such as multi-pane layouts to
+appropriately scale your UI on different device form factors.</p>
+<p>For more information, read <a href="{@docRoot}design/style/devices-displays.html">Devices and Displays</a> as
+well as <a href="{@docRoot}design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a> in this design guide.</p>
diff --git a/docs/html/design/patterns/selection.html b/docs/html/design/patterns/selection.html
deleted file mode 100644
index 44c6a84..0000000
--- a/docs/html/design/patterns/selection.html
+++ /dev/null
@@ -1,257 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Selection
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Selection</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Android 3.0 introduced the <em>long press</em> gesture&mdash;that is, a touch that's held in the same
-position for a moment&mdash;as the global gesture to select data. This affects the way you should
-handle multi-select and contextual actions in your apps.</p>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>What has changed?</h4>
-<p>In previous versions of Android, the long press gesture was universally used to display contextual
-actions for a given data item in a contextual menu.</p>
-<p>This pattern changed with Android 3.0. The long press gesture is now used to select data, combining
-contextual actions and selection management functions for selected data into a new element called
-the contextual action bar (CAB).</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/selection_context_menu.png">
-    <div class="figure-caption">
-      Traditional use of the long press gesture to show contextual menus.
-    </div>
-
-  </div>
-</div>
-
-<h4>Using the contextual action bar (CAB)</h4>
-<p>The selection CAB is a temporary action bar that overlays your app's current action bar while data
-is selected. It appears after the user long presses on a selectable data item.</p>
-
-<img src="../static/content/selection_cab_big.png">
-
-<div class="vspace size-1">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<p>From here the user can:</p>
-<ul>
-<li>Select additional data items by touching them.</li>
-<li>Trigger an action from the CAB that applies to all highlighted data items. The CAB then
-  automatically dismisses itself.</li>
-<li>Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button. This removes
-  the CAB along with all selection highlights.</li>
-</ul>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/selection_cab_example.png">
-
-  </div>
-</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
-
-<h4>Selecting CAB actions</h4>
-<p>You can decide which actions and elements appear in the CAB. Use the guidelines in the <a href="actionbar.html">Action Bar
-pattern</a> to decide which items to surface at the top level and which to move to the
-action overflow.</p>
-<h4>Dynamically adjust CAB actions</h4>
-<p>In most cases you need to adjust the actions in the CAB dynamically as the user adds more items to
-the selection. Actions that apply to a single selected data item don't necessarily apply to multiple
-selected data items of the same kind.</p>
-
-  </div>
-  <div class="layout-content-col span-7">
-
-    <img src="../static/content/selection_adjusting_actions.png">
-    <div class="figure-caption">
-      Adjusting actions in the CAB as additional items are selected.
-    </div>
-
-  </div>
-</div>
-
-<h2 id="checklist">Checklist</h2>
-
-<ul>
-<li>
-<p>Whenever your app supports the selection of multiple data items, make use of the contextual action
-  bar (CAB).</p>
-</li>
-<li>
-<p>Reserve the long press gesture for selection exclusively. Don't use it to display traditional
-  contextual menus.</p>
-</li>
-<li>
-<p>If you don't support multi-selection within a list, long press should do nothing.</p>
-</li>
-<li>
-<p>Plan the actions you want to display inside of a CAB in the same way you would plan the actions
-  inside your app's action bar.</p>
-</li>
-</ul>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/selection.jd b/docs/html/design/patterns/selection.jd
new file mode 100644
index 0000000..e3ee90e
--- /dev/null
+++ b/docs/html/design/patterns/selection.jd
@@ -0,0 +1,100 @@
+page.title=Selection
+@jd:body
+
+<p>Android 3.0 introduced the <em>long press</em> gesture&mdash;that is, a touch that's held in the same
+position for a moment&mdash;as the global gesture to select data. This affects the way you should
+handle multi-select and contextual actions in your apps.</p>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>What has changed?</h4>
+<p>In previous versions of Android, the long press gesture was universally used to display contextual
+actions for a given data item in a contextual menu.</p>
+<p>This pattern changed with Android 3.0. The long press gesture is now used to select data, combining
+contextual actions and selection management functions for selected data into a new element called
+the contextual action bar (CAB).</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/selection_context_menu.png">
+    <div class="figure-caption">
+      Traditional use of the long press gesture to show contextual menus.
+    </div>
+
+  </div>
+</div>
+
+<h4>Using the contextual action bar (CAB)</h4>
+<p>The selection CAB is a temporary action bar that overlays your app's current action bar while data
+is selected. It appears after the user long presses on a selectable data item.</p>
+
+<img src="{@docRoot}design/media/selection_cab_big.png">
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<p>From here the user can:</p>
+<ul>
+<li>Select additional data items by touching them.</li>
+<li>Trigger an action from the CAB that applies to all highlighted data items. The CAB then
+  automatically dismisses itself.</li>
+<li>Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button. This removes
+  the CAB along with all selection highlights.</li>
+</ul>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/selection_cab_example.png">
+
+  </div>
+</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+
+<h4>Selecting CAB actions</h4>
+<p>You can decide which actions and elements appear in the CAB. Use the guidelines in the <a href="actionbar.html">Action Bar
+pattern</a> to decide which items to surface at the top level and which to move to the
+action overflow.</p>
+<h4>Dynamically adjust CAB actions</h4>
+<p>In most cases you need to adjust the actions in the CAB dynamically as the user adds more items to
+the selection. Actions that apply to a single selected data item don't necessarily apply to multiple
+selected data items of the same kind.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/selection_adjusting_actions.png">
+    <div class="figure-caption">
+      Adjusting actions in the CAB as additional items are selected.
+    </div>
+
+  </div>
+</div>
+
+<h2 id="checklist">Checklist</h2>
+
+<ul>
+<li>
+<p>Whenever your app supports the selection of multiple data items, make use of the contextual action
+  bar (CAB).</p>
+</li>
+<li>
+<p>Reserve the long press gesture for selection exclusively. Don't use it to display traditional
+  contextual menus.</p>
+</li>
+<li>
+<p>If you don't support multi-selection within a list, long press should do nothing.</p>
+</li>
+<li>
+<p>Plan the actions you want to display inside of a CAB in the same way you would plan the actions
+  inside your app's action bar.</p>
+</li>
+</ul>
diff --git a/docs/html/design/patterns/swipe-views.html b/docs/html/design/patterns/swipe-views.html
deleted file mode 100644
index acc9f39..0000000
--- a/docs/html/design/patterns/swipe-views.html
+++ /dev/null
@@ -1,231 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>
-
-Android Design - Swipe Views
-    </title>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
-    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
-    <link rel="stylesheet" href="../static/default.css">
-
-  </head>
-  <body>
-
-    <div id="page-container">
-
-      <div id="page-header"><a href="../index.html">Android Design</a></div>
-
-      <div id="main-row">
-
-        <ul id="nav">
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
-            <ul>
-              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
-              <li><a href="../get-started/principles.html">Design Principles</a></li>
-              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
-            <ul>
-              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
-              <li><a href="../style/themes.html">Themes</a></li>
-              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
-              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
-              <li><a href="../style/typography.html">Typography</a></li>
-              <li><a href="../style/color.html">Color</a></li>
-              <li><a href="../style/iconography.html">Iconography</a></li>
-              <li><a href="../style/writing.html">Writing Style</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
-            <ul>
-              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
-              <li><a href="../patterns/gestures.html">Gestures</a></li>
-              <li><a href="../patterns/app-structure.html">App Structure</a></li>
-              <li><a href="../patterns/navigation.html">Navigation</a></li>
-              <li><a href="../patterns/actionbar.html">Action Bar</a></li>
-              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
-              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
-              <li><a href="../patterns/selection.html">Selection</a></li>
-              <li><a href="../patterns/notifications.html">Notifications</a></li>
-              <li><a href="../patterns/compatibility.html">Compatibility</a></li>
-              <li><a href="../patterns/pure-android.html">Pure Android</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
-            <ul>
-              <li><a href="../building-blocks/tabs.html">Tabs</a></li>
-              <li><a href="../building-blocks/lists.html">Lists</a></li>
-              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
-              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
-              <li><a href="../building-blocks/spinners.html">Spinners</a></li>
-              <li><a href="../building-blocks/buttons.html">Buttons</a></li>
-              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
-              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
-              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
-              <li><a href="../building-blocks/switches.html">Switches</a></li>
-              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
-              <li><a href="../building-blocks/pickers.html">Pickers</a></li>
-            </ul>
-          </li>
-
-          <li class="nav-section">
-            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
-          </li>
-
-          <li>
-            <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
-          </li>
-
-        </ul>
-
-        <div id="content">
-
-          
-          <div class="layout-content-row content-header">
-            <div class="layout-content-col span-9">
-              <h2>Swipe Views</h2>
-            </div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-
-          
-
-<p>Efficient navigation is one of the cornerstones of a well-designed app. While apps are generally
-built in a hierarchical fashion, there are instances where horizontal navigation can flatten
-vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views
-allow the user to efficiently move from item to item using a simple gesture and thereby make
-browsing and consuming data a more fluent experience.</p>
-<h2 id="detail-views">Swiping Between Detail Views</h2>
-
-<p>An app's data is often organized in a master/detail relationship: The user can view a list of
-related data items, such as images, chats, or emails, and then pick one of the items to see the
-detail contents in a separate screen.</p>
-
-<img src="../static/content/swipe_views.png">
-<div class="figure-caption">
-  Master (left) and detail (right) views.
-</div>
-
-<p>On a phone, since the master and detail are on separate screens, this typically requires the user to
-jump back and forth between the list and the detail view, aka "pogo-sticking".</p>
-<p>In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by
-using the swipe gesture to navigate to the next/previous detail view.</p>
-
-<img src="../static/content/swipe_views2.png">
-<div class="figure-caption">
-  Navigating between consecutive Email messages using the swipe gesture.
-</div>
-
-<h2 id="between-tabs">Swiping Between Tabs</h2>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
-
-    <div class="framed-galaxynexus-port-span-5">
-      <video class="play-on-hover" autoplay>
-        <source src="../static/content/swipe_tabs.mp4" type="video/mp4">
-        <source src="../static/content/swipe_tabs.webm" type="video/webm">
-        <source src="../static/content/swipe_tabs.ogv" type="video/ogg">
-      </video>
-    </div>
-    <div class="figure-caption">
-      People app with swipe gesture navigation between top-level screens.
-      <div class="video-instructions">&nbsp;</div>
-    </div>
-
-  </div>
-  <div class="layout-content-col span-8">
-
-<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p>
-<div class="vspace size-2">&nbsp;</div>
-
-<h2 id="checklist">Checklist</h2>
-
-<ul>
-<li>
-<p>Use swipe to quickly navigate between detail views or tabs.</p>
-</li>
-<li>
-<p>Transition between the views as the user performs the swipe gesture. Do not wait for the
-  gesture to complete and then transition between views.</p>
-</li>
-<li>
-<p>If you used buttons in the past for previous/next navigation, replace them with
-  the swipe gesture.</p>
-</li>
-<li>
-<p>Consider adding contextual information in your detail view that informs the user about the
-  relative list position of the currently visible item.</p>
-</li>
-</ul>
-
-  </div>
-</div>
-
-
-
-          
-          <div class="layout-content-row content-footer">
-            <div class="paging-links layout-content-col span-9">&nbsp;</div>
-            <div class="paging-links layout-content-col span-4">
-              <a href="#" class="prev-page-link">Previous</a>
-              <a href="#" class="next-page-link">Next</a>
-            </div>
-          </div>
-          
-        </div>
-
-      </div>
-
-      <div id="page-footer">
-
-        <p id="copyright">
-          Except as noted, this content is licensed under
-          <a href="http://creativecommons.org/licenses/by/2.5/">
-          Creative Commons Attribution 2.5</a>.<br>
-          For details and restrictions, see the
-          <a href="http://developer.android.com/license.html">Content License</a>.
-        </p>
-
-        <p>
-          <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
-          <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
-          <a href="http://www.android.com/branding.html">Brand Guidelines</a>
-        </p>
-
-      </div>
-    </div>
-
-    <script src="../static/jquery-1.6.2.min.js"></script>
-    <script>
-    var SITE_ROOT = '../';
-    </script>
-    <script src="../static/default.js"></script>
-
-
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    var pageTracker = _gat._getTracker("UA-5831155-1");
-    pageTracker._trackPageview();
-    </script>
-  </body>
-</html>
diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd
new file mode 100644
index 0000000..95d65dd
--- /dev/null
+++ b/docs/html/design/patterns/swipe-views.jd
@@ -0,0 +1,74 @@
+page.title=Swipe Views
+@jd:body
+
+<p>Efficient navigation is one of the cornerstones of a well-designed app. While apps are generally
+built in a hierarchical fashion, there are instances where horizontal navigation can flatten
+vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views
+allow the user to efficiently move from item to item using a simple gesture and thereby make
+browsing and consuming data a more fluent experience.</p>
+<h2 id="detail-views">Swiping Between Detail Views</h2>
+
+<p>An app's data is often organized in a master/detail relationship: The user can view a list of
+related data items, such as images, chats, or emails, and then pick one of the items to see the
+detail contents in a separate screen.</p>
+
+<img src="{@docRoot}design/media/swipe_views.png">
+<div class="figure-caption">
+  Master (left) and detail (right) views.
+</div>
+
+<p>On a phone, since the master and detail are on separate screens, this typically requires the user to
+jump back and forth between the list and the detail view, aka "pogo-sticking".</p>
+<p>In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by
+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.
+</div>
+
+<h2 id="between-tabs">Swiping Between Tabs</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-5">
+
+    <div class="framed-galaxynexus-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">
+        <source src="{@docRoot}design/media/swipe_tabs.ogv" type="video/ogg">
+      </video>
+    </div>
+    <div class="figure-caption">
+      People app with swipe gesture navigation between top-level screens.
+      <div class="video-instructions">&nbsp;</div>
+    </div>
+
+  </div>
+  <div class="layout-content-col span-8">
+
+<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p>
+<div class="vspace size-2">&nbsp;</div>
+
+<h2 id="checklist">Checklist</h2>
+
+<ul>
+<li>
+<p>Use swipe to quickly navigate between detail views or tabs.</p>
+</li>
+<li>
+<p>Transition between the views as the user performs the swipe gesture. Do not wait for the
+  gesture to complete and then transition between views.</p>
+</li>
+<li>
+<p>If you used buttons in the past for previous/next navigation, replace them with
+  the swipe gesture.</p>
+</li>
+<li>
+<p>Consider adding contextual information in your detail view that informs the user about the
+  relative list position of the currently visible item.</p>
+</li>
+</ul>
+
+  </div>
+</div>
diff --git a/docs/html/design/static/callout.png b/docs/html/design/static/callout.png
deleted file mode 100644
index 5d49f34..0000000
--- a/docs/html/design/static/callout.png
+++ /dev/null
Binary files differ
diff --git a/docs/html/design/static/default.css b/docs/html/design/static/default.css
deleted file mode 100644
index 3aa1db3..0000000
--- a/docs/html/design/static/default.css
+++ /dev/null
@@ -1,633 +0,0 @@
-/* color definitions */
-/* 16 column layout */
-/* clearfix idiom */
-/* common mixins */
-/* page layout + top-level styles */
-::-webkit-selection,
-::-moz-selection,
-::selection {
-  background-color: #0099cc;
-  color: #fff; }
-
-html, body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  background: #eee none no-repeat fixed top left;
-  background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#dddddd), color-stop(25%, #f2f2f2), color-stop(75%, #f2f2f2), to(#dddddd));
-  background-image: -moz-linear-gradient(top, #dddddd, #f2f2f2, #f2f2f2, #dddddd);
-  -webkit-font-smoothing: antialiased;
-  /* prevent subpixel antialiasing, which thickens the text */
-  text-rendering: optimizeLegibility;
-  /* opentype ftw */ }
-
-body {
-  color: #555555;
-  font: 14px/20px Roboto, sans-serif;
-  font-weight: 400; }
-
-#page-container {
-  width: 940px;
-  margin: 0 40px; }
-
-#page-header {
-  height: 80px;
-  margin-bottom: 20px;
-  font-size: 48px;
-  line-height: 48px;
-  font-weight: 100;
-  padding-left: 10px; }
-  #page-header a {
-    display: block;
-    position: relative;
-    top: 20px;
-    text-decoration: none;
-    color: #555555 !important; }
-
-#main-row {
-  display: inline-block; }
-  #main-row:after {
-    content: ".";
-    display: block;
-    height: 0;
-    clear: both;
-    visibility: hidden; }
-  * html #main-row {
-    height: 1px; }
-
-#page-footer {
-  margin-left: 190px;
-  margin-top: 80px;
-  color: #999999;
-  padding-bottom: 40px;
-  font-size: 12px;
-  line-height: 15px; }
-  #page-footer a {
-    color: #777777; }
-  #page-footer #copyright {
-    margin-bottom: 10px; }
-
-#nav {
-  width: 160px;
-  margin-right: 20px;
-  float: left; }
-
-#content {
-  width: 760px;
-  float: left; }
-
-a,
-a:visited {
-  color: #333333; }
-
-a:hover,
-acronym:hover {
-  color: #7aa1b0 !important; }
-
-a:focus,
-a:active {
-  color: #33b5e5 !important; }
-
-img {
-  border: none; }
-
-ul {
-  margin: 0;
-  padding: 0; }
-
-strong {
-  font-weight: 500; }
-
-em {
-  font-style: italic; }
-
-code {
-  font-family: Courier New, monospace; }
-
-acronym {
-  border-bottom: 1px dotted #555555;
-  cursor: help; }
-
-acronym:hover {
-  border-bottom-color: #7aa1b0; }
-
-img.with-shadow,
-video.with-shadow {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
-
-/* disclosures mixin */
-/* content layout */
-.layout-content-row {
-  display: inline-block;
-  margin-bottom: 10px; }
-  .layout-content-row:after {
-    content: ".";
-    display: block;
-    height: 0;
-    clear: both;
-    visibility: hidden; }
-  * html .layout-content-row {
-    height: 1px; }
-
-.layout-content-col {
-  float: left;
-  margin-left: 20px; }
-  .layout-content-col:first-child {
-    margin-left: 0; }
-
-.layout-content-col.span-1 {
-  width: 40px; }
-
-.layout-content-col.span-2 {
-  width: 100px; }
-
-.layout-content-col.span-3 {
-  width: 160px; }
-
-.layout-content-col.span-4 {
-  width: 220px; }
-
-.layout-content-col.span-5 {
-  width: 280px; }
-
-.layout-content-col.span-6 {
-  width: 340px; }
-
-.layout-content-col.span-7 {
-  width: 400px; }
-
-.layout-content-col.span-8 {
-  width: 460px; }
-
-.layout-content-col.span-9 {
-  width: 520px; }
-
-.layout-content-col.span-10 {
-  width: 580px; }
-
-.layout-content-col.span-11 {
-  width: 640px; }
-
-.layout-content-col.span-12 {
-  width: 700px; }
-
-.layout-content-col.span-13 {
-  width: 760px; }
-
-.vspace.size-1 {
-  height: 10px; }
-
-.vspace.size-2 {
-  height: 20px; }
-
-.vspace.size-3 {
-  height: 30px; }
-
-.vspace.size-4 {
-  height: 40px; }
-
-.vspace.size-5 {
-  height: 50px; }
-
-.vspace.size-6 {
-  height: 60px; }
-
-.vspace.size-7 {
-  height: 70px; }
-
-.vspace.size-8 {
-  height: 80px; }
-
-.vspace.size-9 {
-  height: 90px; }
-
-.vspace.size-10 {
-  height: 100px; }
-
-.vspace.size-11 {
-  height: 110px; }
-
-.vspace.size-12 {
-  height: 120px; }
-
-.vspace.size-13 {
-  height: 130px; }
-
-.vspace.size-14 {
-  height: 140px; }
-
-.vspace.size-15 {
-  height: 150px; }
-
-.vspace.size-16 {
-  height: 160px; }
-
-/* nav */
-#nav {
-  /* section header divs */
-  /* expanded section header divs */
-  /* sublinks */ }
-  #nav li {
-    list-style-type: none;
-    font-size: 14px;
-    line-height: 10px; }
-  #nav a {
-    color: #555555;
-    text-decoration: none; }
-  #nav li.selected > a,
-  #nav li.selected .nav-section-header a {
-    font-weight: 500;
-    color: #0099cc !important; }
-  #nav .nav-section-header {
-    position: relative;
-    padding: 10px;
-    margin-bottom: 1px;
-    /* section header links */ }
-    #nav .nav-section-header a {
-      color: #333333;
-      font-weight: 500;
-      text-transform: uppercase; }
-    #nav .nav-section-header:after {
-      content: '';
-      background: transparent url(disclosure_down.png) no-repeat scroll top left;
-      width: 10px;
-      height: 10px;
-      display: block;
-      position: absolute;
-      top: 10px;
-      right: 10px; }
-    #nav .nav-section-header.empty:after {
-      display: none; }
-  #nav li.expanded .nav-section-header {
-    background: rgba(0, 0, 0, 0.05); }
-    #nav li.expanded .nav-section-header:after {
-      content: '';
-      background: transparent url(disclosure_up.png) no-repeat scroll top left;
-      width: 10px;
-      height: 10px; }
-  #nav > li > ul {
-    height: 0;
-    overflow: hidden;
-    margin-bottom: 0; }
-    #nav > li > ul.animate-height {
-      -webkit-transition: height 0.25s ease-in;
-      -moz-transition: height 0.25s ease-in;
-      transition: height 0.25s ease-in; }
-    #nav > li > ul li {
-      padding: 10px 10px 11px 10px; }
-  #nav > li.expanded > ul {
-    height: auto; }
-    #nav > li.expanded > ul li {
-      background: rgba(0, 0, 0, 0.03); }
-  #nav #back-dac-section {
-    padding: 10px;
-    border-top: 1px solid #ddd; }
-    #nav #back-dac-section a {
-      color: #333333;
-      font-weight: 500;
-      text-transform: uppercase; }
-
-/* content header */
-.content-header {
-  border-bottom: 1px solid #33b5e5;
-  height: 30px; }
-  .content-header h2 {
-    border-bottom: 0; }
-  .content-header.just-links {
-    border-bottom: 0; }
-
-.content-footer {
-  border-top: 1px solid #33b5e5;
-  margin-top: 10px;
-  height: 30px; }
-
-.paging-links {
-  position: relative; }
-  .paging-links a {
-    position: absolute;
-    font-size: 14px;
-    line-height: 30px;
-    color: #555555;
-    text-decoration: none;
-    text-transform: uppercase; }
-  .paging-links .prev-page-link {
-    display: none;
-    left: -5px; }
-    .paging-links .prev-page-link:before {
-      content: '';
-      background: transparent url(disclosure_left.png) no-repeat scroll top left;
-      width: 10px;
-      height: 10px;
-      display: inline-block;
-      margin-right: 5px; }
-  .paging-links .next-page-link {
-    display: none;
-    right: 10px; }
-    .paging-links .next-page-link:after {
-      content: '';
-      background: transparent url(disclosure_right.png) no-repeat scroll top left;
-      width: 10px;
-      height: 10px;
-      display: inline-block;
-      margin-left: 5px; }
-
-/* content body */
-@-webkit-keyframes glowheader {
-  from {
-    background-color: #33b5e5;
-    color: #000;
-    border-bottom-color: #000; }
-
-  to {
-    background-color: transparent;
-    color: #33b5e5;
-    border-bottom-color: #33b5e5; } }
-
-@-moz-keyframes glowheader {
-  from {
-    background-color: #33b5e5;
-    color: #000;
-    border-bottom-color: #000; }
-
-  to {
-    background-color: transparent;
-    color: #33b5e5;
-    border-bottom-color: #33b5e5; } }
-
-@keyframes glowheader {
-  from {
-    background-color: #33b5e5;
-    color: #000;
-    border-bottom-color: #000; }
-
-  to {
-    background-color: transparent;
-    color: #33b5e5;
-    border-bottom-color: #33b5e5; } }
-
-#content p,
-#content ul,
-#content ol,
-#content h3 {
-  margin: 0 10px 10px 10px; }
-#content h2 {
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-bottom: 10px;
-  font-size: 16px;
-  line-height: 30px;
-  font-weight: 500;
-  color: #33b5e5;
-  border-bottom: 1px solid #33b5e5;
-  height: 30px; }
-  #content h2:target {
-    -webkit-animation-name: glowheader;
-    -moz-animation-name: glowheader;
-    animation-name: glowheader;
-    -webkit-animation-duration: 0.7s;
-    -moz-animation-duration: 0.7s;
-    animation-duration: 0.7s;
-    -webkit-animation-timing-function: ease-out;
-    -moz-animation-timing-function: ease-out;
-    animation-timing-function: ease-out; }
-#content hr {
-  border: 0;
-  border-bottom: 1px solid #33b5e5;
-  margin-bottom: 20px; }
-#content h3 {
-  color: #33b5e5;
-  text-transform: uppercase;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 500; }
-#content h4 {
-  margin: 0 10px;
-  color: #333333;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px; }
-#content strong {
-  color: #333333; }
-#content ul li,
-#content ol li {
-  margin-left: 20px; }
-  #content ul li h4,
-  #content ol li h4 {
-    margin: 0; }
-  #content ul li p,
-  #content ol li p {
-    margin-left: 0; }
-#content ul li {
-  list-style-type: square;
-  list-style-type: none;
-  position: relative; }
-  #content ul li:before {
-    content: '\2022';
-    font-family: verdana;
-    font-size: 14px;
-    line-height: 20px;
-    position: absolute;
-    left: -20px;
-    top: -1px; }
-#content ol {
-  counter-reset: item; }
-  #content ol li {
-    font-size: 14px;
-    line-height: 20px;
-    list-style-type: none;
-    position: relative; }
-    #content ol li:before {
-      content: counter(item) ". ";
-      counter-increment: item;
-      position: absolute;
-      left: -20px;
-      top: 0; }
-    #content ol li.value-1:before {
-      content: "1. "; }
-    #content ol li.value-2:before {
-      content: "2. "; }
-    #content ol li.value-3:before {
-      content: "3. "; }
-    #content ol li.value-4:before {
-      content: "4. "; }
-    #content ol li.value-5:before {
-      content: "5. "; }
-    #content ol li.value-6:before {
-      content: "6. "; }
-    #content ol li.value-7:before {
-      content: "7. "; }
-    #content ol li.value-8:before {
-      content: "8. "; }
-    #content ol li.value-9:before {
-      content: "9. "; }
-    #content ol li.value-10:before {
-      content: "10. "; }
-#content .with-callouts ol li {
-  list-style-position: inside;
-  margin-left: 0; }
-  #content .with-callouts ol li:before {
-    position: static;
-    display: inline;
-    left: 0;
-    float: left;
-    width: 17px;
-    color: #33b5e5;
-    font-weight: 500; }
-
-/* special list items */
-li.no-bullet {
-  list-style-type: none !important; }
-
-#content li.with-icon {
-  position: relative;
-  margin-left: 40px;
-  min-height: 30px; }
-  #content li.with-icon p {
-    margin-left: 0 !important; }
-  #content li.with-icon:before {
-    position: absolute;
-    left: -40px;
-    top: 0;
-    content: '';
-    width: 30px;
-    height: 30px; }
-  #content li.with-icon.tablet:before {
-    background-image: url(ico_phone_tablet.png); }
-  #content li.with-icon.web:before {
-    background-image: url(ico_web.png); }
-  #content li.with-icon.checklist:before {
-    background-image: url(ico_checklist.png); }
-  #content li.with-icon.action:before {
-    background-image: url(ico_action.png); }
-  #content li.with-icon.use:before {
-    background-image: url(ico_use.png); }
-
-/* figures and callouts */
-.figure {
-  position: relative; }
-  .figure.pad-below {
-    margin-bottom: 20px; }
-  .figure .figure-callout {
-    position: absolute;
-    color: #fff;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 23px;
-    text-align: center;
-    background: transparent url(callout.png) no-repeat scroll 50% 50%;
-    padding-right: 2px;
-    width: 30px;
-    height: 29px;
-    z-index: 1000; }
-    .figure .figure-callout.top {
-      top: -9px; }
-    .figure .figure-callout.right {
-      right: -5px; }
-
-.figure-caption {
-  margin: 0 10px 20px 10px;
-  font-size: 14px;
-  line-height: 20px;
-  font-style: italic; }
-
-/* rows of figures */
-.figure-row {
-  font-size: 0;
-  line-height: 0;
-  /* to prevent space between figures */ }
-  .figure-row .figure {
-    display: inline-block;
-    vertical-align: top; }
-  .figure-row .figure + .figure {
-    margin-left: 10px;
-    /* reintroduce space between figures */ }
-
-/* video  containers */
-.framed-galaxynexus-land-span-13 {
-  background: transparent url(content/misc_full_galaxynexus_blank_land_span13.png) no-repeat scroll top left;
-  padding: 42px 122px 62px 126px;
-  overflow: hidden; }
-  .framed-galaxynexus-land-span-13, .framed-galaxynexus-land-span-13 video, .framed-galaxynexus-land-span-13 img {
-    width: 512px;
-    height: 286px; }
-
-.framed-galaxynexus-port-span-9 {
-  background: transparent url(content/misc_full_galaxynexus_blank_port_span9.png) no-repeat scroll top left;
-  padding: 95px 122px 107px 124px;
-  overflow: hidden; }
-  .framed-galaxynexus-port-span-9, .framed-galaxynexus-port-span-9 video, .framed-galaxynexus-port-span-9 img {
-    width: 274px;
-    height: 488px; }
-
-.framed-galaxynexus-port-span-5 {
-  background: transparent url(content/misc_full_galaxynexus_blank_port_span5.png) no-repeat scroll top left;