diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 4dc9b4f2ff..7246485c9d 100644
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
diff --git a/docs/less.html b/docs/less.html
index de11c79ba2..19b2b2235f 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -139,12 +139,24 @@
 
   <div class="row">
     <div class="span6">
-      <h3>Hyperlinks</h3>
+      <h3>Scaffolding and links</h3>
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td class="span2"><code>@linkColor</code></td>
-            <td>#08c</td>
+            <td class="span2"><code>@bodyBackground</code></td>
+            <td><code>@white</code></td>
+            <td>Page background color</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@textColor</code></td>
+            <td><code>@grayDark</code></td>
+            <td>Default text color for entire body, headings, and more</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@linkColor</code></td>
+            <td><code>#08c</code></td>
             <td>Default link text color</td>
             <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
@@ -184,18 +196,69 @@
       <h3>Typography</h3>
       <table class="table table-bordered table-striped">
         <tbody>
+          <tr>
+            <td class="span2"><code>@sansFontFamily</code></td>
+            <td>"Helvetica Neue", Helvetica, Arial, sans-serif</td>
+          </tr>
+          <tr>
+            <td><code>@serifFontFamily</code></td>
+            <td><code>Georgia, "Times New Roman", Times, serif</code></td>
+          </tr>
+          <tr>
+            <td><code>@monoFontFamily</code></td>
+            <td>Menlo, Monaco, "Courier New", monospace</td>
+          </tr>
+
           <tr>
             <td class="span2"><code>@baseFontSize</code></td>
             <td>13px</td>
           </tr>
           <tr>
             <td><code>@baseFontFamily</code></td>
-            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+            <td><code>@sansFontFamily</code></td>
           </tr>
           <tr>
             <td><code>@baseLineHeight</code></td>
             <td>18px</td>
           </tr>
+          <tr>
+            <td><code>@altFontFamily</code></td>
+            <td><code>@serifFontFamily</code></td>
+          </tr>
+
+          <tr>
+            <td class="span2"><code>@headingsFontFamily</code></td>
+            <td><code>inherit</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsFontWeight</code></td>
+            <td><code>bold</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsColor</code></td>
+            <td><code>inherit</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Tables</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@tableBackground</code></td>
+            <td><code>transparent</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundAccent</code></td>
+            <td><code>#f9f9f9</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundHover</code></td>
+            <td><code>#f5f5f5</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBorder</code></td>
+            <td><code>ddd</code></td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -378,47 +441,21 @@
           <tr>
             <td class="span3"><code>@placeholderText</code></td>
             <td><code>@grayLight</code></td>
-            <td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-        </tbody>
-      </table>
-      <h4>Navbar</h4>
-      <table class="table table-bordered table-striped">
-        <tbody>
-          <tr>
-            <td class="span3"><code>@navbarHeight</code></td>
-            <td>40px</td>
-            <td class="swatch-col"></td>
           </tr>
           <tr>
-            <td><code>@navbarBackground</code></td>
-            <td><code>@grayDarker</code></td>
-            <td><span class="swatch" style="background-color: #222;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarBackgroundHighlight</code></td>
-            <td><code>@grayDark</code></td>
-            <td><span class="swatch" style="background-color: #333;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarText</code></td>
-            <td><code>@grayLight</code></td>
-            <td><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarLinkColor</code></td>
-            <td><code>@grayLight</code></td>
-            <td><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarLinkColorHover</code></td>
+            <td><code>@inputBackground</code></td>
             <td><code>@white</code></td>
-            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@inputBorder</code></td>
+            <td><code>#ccc</code></td>
+          </tr>
+          <tr>
+            <td><code>@inputDisabledBackground</code></td>
+            <td><code>@grayLighter</code></td>
           </tr>
         </tbody>
       </table>
-    </div>
-    <div class="span6">
       <h4>Form states and alerts</h4>
       <table class="table table-bordered table-striped">
         <tbody>
@@ -465,6 +502,130 @@
         </tbody>
       </table>
     </div>
+    <div class="span6">
+      <h4>Navbar</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@navbarHeight</code></td>
+            <td>40px</td>
+            <td class="swatch-col"></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBackground</code></td>
+            <td><code>@grayDarker</code></td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBackgroundHighlight</code></td>
+            <td><code>@grayDark</code></td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarText</code></td>
+            <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColor</code></td>
+            <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColorActive</code></td>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundHover</code></td>
+            <td><code>transparent</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundActive</code></td>
+            <td><code>@navbarBackground</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarSearchBackground</code></td>
+            <td><code>lighten(@navbarBackground, 25%)</code></td>
+            <td><span class="swatch" style="background-color: #666;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBackgroundFocus</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBorder</code></td>
+            <td><code>darken(@navbarSearchBackground, 30%)</code></td>
+            <td><span class="swatch" style="background-color: #111;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchPlaceholderColor</code></td>
+            <td><code>#ccc</code></td>
+            <td><span class="swatch" style="background-color: #ccc;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBrandColor</code></td>
+            <td><code>@navbarLinkColor</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+      <h4>Dropdowns</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@dropdownBackground</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownBorder</code></td>
+            <td><code>rgba(0,0,0,.2)</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkColor</code></td>
+            <td><code>@grayDark</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkColorHover</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkBackgroundHover</code></td>
+            <td><code>@linkColor</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h4>Hero unit</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@heroUnitBackground</code></td>
+            <td><code>@grayLighter</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
+          </tr>
+          <tr>
+            <td class="span2"><code>@heroUnitHeadingColor</code></td>
+            <td><code>inherit</code></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><code>@heroUnitLeadColor</code></td>
+            <td><code>inhereit</code></td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div><!-- /row -->
 
 </section>
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index 00130550ae..129c76e9c0 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -63,12 +63,24 @@
 
   <div class="row">
     <div class="span6">
-      <h3>{{_i}}Hyperlinks{{/i}}</h3>
+      <h3>{{_i}}Scaffolding and links{{/i}}</h3>
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td class="span2"><code>@linkColor</code></td>
-            <td>#08c</td>
+            <td class="span2"><code>@bodyBackground</code></td>
+            <td><code>@white</code></td>
+            <td>{{_i}}Page background color{{/i}}</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@textColor</code></td>
+            <td><code>@grayDark</code></td>
+            <td>{{_i}}Default text color for entire body, headings, and more{{/i}}</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@linkColor</code></td>
+            <td><code>#08c</code></td>
             <td>{{_i}}Default link text color{{/i}}</td>
             <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
@@ -108,18 +120,69 @@
       <h3>{{_i}}Typography{{/i}}</h3>
       <table class="table table-bordered table-striped">
         <tbody>
+          <tr>
+            <td class="span2"><code>@sansFontFamily</code></td>
+            <td>"Helvetica Neue", Helvetica, Arial, sans-serif</td>
+          </tr>
+          <tr>
+            <td><code>@serifFontFamily</code></td>
+            <td><code>Georgia, "Times New Roman", Times, serif</code></td>
+          </tr>
+          <tr>
+            <td><code>@monoFontFamily</code></td>
+            <td>Menlo, Monaco, "Courier New", monospace</td>
+          </tr>
+
           <tr>
             <td class="span2"><code>@baseFontSize</code></td>
             <td>13px</td>
           </tr>
           <tr>
             <td><code>@baseFontFamily</code></td>
-            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+            <td><code>@sansFontFamily</code></td>
           </tr>
           <tr>
             <td><code>@baseLineHeight</code></td>
             <td>18px</td>
           </tr>
+          <tr>
+            <td><code>@altFontFamily</code></td>
+            <td><code>@serifFontFamily</code></td>
+          </tr>
+
+          <tr>
+            <td class="span2"><code>@headingsFontFamily</code></td>
+            <td><code>inherit</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsFontWeight</code></td>
+            <td><code>bold</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsColor</code></td>
+            <td><code>inherit</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>{{_i}}Tables{{/i}}</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@tableBackground</code></td>
+            <td><code>transparent</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundAccent</code></td>
+            <td><code>#f9f9f9</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundHover</code></td>
+            <td><code>#f5f5f5</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBorder</code></td>
+            <td><code>ddd</code></td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -302,47 +365,21 @@
           <tr>
             <td class="span3"><code>@placeholderText</code></td>
             <td><code>@grayLight</code></td>
-            <td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-        </tbody>
-      </table>
-      <h4>{{_i}}Navbar{{/i}}</h4>
-      <table class="table table-bordered table-striped">
-        <tbody>
-          <tr>
-            <td class="span3"><code>@navbarHeight</code></td>
-            <td>40px</td>
-            <td class="swatch-col"></td>
           </tr>
           <tr>
-            <td><code>@navbarBackground</code></td>
-            <td><code>@grayDarker</code></td>
-            <td><span class="swatch" style="background-color: #222;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarBackgroundHighlight</code></td>
-            <td><code>@grayDark</code></td>
-            <td><span class="swatch" style="background-color: #333;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarText</code></td>
-            <td><code>@grayLight</code></td>
-            <td><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarLinkColor</code></td>
-            <td><code>@grayLight</code></td>
-            <td><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-          <tr>
-            <td><code>@navbarLinkColorHover</code></td>
+            <td><code>@inputBackground</code></td>
             <td><code>@white</code></td>
-            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@inputBorder</code></td>
+            <td><code>#ccc</code></td>
+          </tr>
+          <tr>
+            <td><code>@inputDisabledBackground</code></td>
+            <td><code>@grayLighter</code></td>
           </tr>
         </tbody>
       </table>
-    </div>
-    <div class="span6">
       <h4>{{_i}}Form states and alerts{{/i}}</h4>
       <table class="table table-bordered table-striped">
         <tbody>
@@ -389,6 +426,130 @@
         </tbody>
       </table>
     </div>
+    <div class="span6">
+      <h4>{{_i}}Navbar{{/i}}</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@navbarHeight</code></td>
+            <td>40px</td>
+            <td class="swatch-col"></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBackground</code></td>
+            <td><code>@grayDarker</code></td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBackgroundHighlight</code></td>
+            <td><code>@grayDark</code></td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarText</code></td>
+            <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColor</code></td>
+            <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColorActive</code></td>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundHover</code></td>
+            <td><code>transparent</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundActive</code></td>
+            <td><code>@navbarBackground</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarSearchBackground</code></td>
+            <td><code>lighten(@navbarBackground, 25%)</code></td>
+            <td><span class="swatch" style="background-color: #666;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBackgroundFocus</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBorder</code></td>
+            <td><code>darken(@navbarSearchBackground, 30%)</code></td>
+            <td><span class="swatch" style="background-color: #111;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchPlaceholderColor</code></td>
+            <td><code>#ccc</code></td>
+            <td><span class="swatch" style="background-color: #ccc;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBrandColor</code></td>
+            <td><code>@navbarLinkColor</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+      <h4>{{_i}}Dropdowns{{/i}}</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@dropdownBackground</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownBorder</code></td>
+            <td><code>rgba(0,0,0,.2)</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkColor</code></td>
+            <td><code>@grayDark</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkColorHover</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkBackgroundHover</code></td>
+            <td><code>@linkColor</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h4>{{_i}}Hero unit{{/i}}</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@heroUnitBackground</code></td>
+            <td><code>@grayLighter</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
+          </tr>
+          <tr>
+            <td class="span2"><code>@heroUnitHeadingColor</code></td>
+            <td><code>inherit</code></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><code>@heroUnitLeadColor</code></td>
+            <td><code>inhereit</code></td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div><!-- /row -->
 
 </section>