big brand update

_includes/nav-about.html

+<li>
+  <a href="#brand">Brand guidelines</a>
+</li>
 <li>
   <a href="#history">History</a>
 </li>

about.html

@@ -13,17 +13,55 @@ base_url: "../"
   <div class="page-header">
     <h1 id="brand">Brand guidelines</h1>
   </div>
-  <p class="lead">Interested in using Bootstrap's brand resources? Great! We have only a few guidelines we ask you to follow.</p>
+  <p class="lead">Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by Mailchimp's <a href="http://mailchimp.com/about/brand-assets/" target="_blank">Brand Assets</a>.</p>
 
-  <h2>Logo</h2>
-  <p>Extremely simple in that it's pure web type, Bootstrap's logo (if you want to call it that) should only appear as Helvetica Neue Bold. You may display it in full as Bootstrap or abbreviated as a capitalized "B". <strong>Do not use the Twitter bird.</strong></p>
-  <div class="bs-example bs-brand">
-    <h1>Bootstrap</h1>
+  <h2>Mark and logo</h2>
+  <p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in Helvetica Neue Bold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <div class="bs-booticon bs-booticon-lg">B</div>
+    </div>
+    <div class="bs-brand-item inverse">
+      <div class="bs-booticon bs-booticon-lg bs-booticon-inverse">B</div>
+    </div>
+  </div>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <h1>Bootstrap</h1>
+    </div>
+    <div class="bs-brand-item inverse">
+      <h1>Bootstrap</h1>
+    </div>
   </div>
 
   <h2>Name</h2>
+  <p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations save for one, a capital <strong>B</strong>.</p>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <h3>Bootstrap</h3>
+      <span class="glyphicon glyphicon-ok"></span>
+    </div>
+    <div class="bs-brand-item">
+      <h3 class="text-muted">BootStrap</h3>
+      <span class="glyphicon glyphicon-remove"></span>
+    </div>
+    <div class="bs-brand-item">
+      <h3 class="text-muted">Twitter Bootstrap</h3>
+      <span class="glyphicon glyphicon-remove"></span>
+    </div>
+  </div>
 
   <h2>Colors</h2>
+  <p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it's purple, it's representative of Bootstrap.</p>
+  <div class="bs-brand">
+    <div class="color-swatches">
+      <div class="color-swatch bs-purple"></div>
+      <div class="color-swatch bs-purple-light"></div>
+      <div class="color-swatch bs-purple-lighter"></div>
+      <div class="color-swatch bs-gray"></div>
+    </div>
+  </div>
+
 </div>
 
 

docs-assets/css/docs.css

@@ -102,6 +102,10 @@ body {
   font-size: 108px;
   line-height: 140px;
 }
+.bs-booticon-inverse {
+  color: #563d7c;
+  background-color: #fff;
+}
 
 
 /*
@@ -676,6 +680,8 @@ h1[id] {
   margin: 0 5px;
   border-radius: 3px;
 }
+
+/* Framework colors */
 .color-swatches .gray-darker   { background-color: #222; }
 .color-swatches .gray-dark     { background-color: #333; }
 .color-swatches .gray          { background-color: #555; }
@@ -687,6 +693,12 @@ h1[id] {
 .color-swatches .brand-danger  { background-color: #d9534f; }
 .color-swatches .brand-info    { background-color: #5bc0de; }
 
+/* Docs colors */
+.color-swatches .bs-purple          { background-color: #563d7c; }
+.color-swatches .bs-purple-light    { background-color: #c7bfd3; }
+.color-swatches .bs-purple-lighter  { background-color: #e5e1ea; }
+.color-swatches .bs-gray            { background-color: #f9f9f9; }
+
 
 /*
  * Team members
@@ -1258,36 +1270,78 @@ h1[id] {
 
 
 /*
- * Miscellaneous
+ * Brand guidelines
  *
- * Odds and ends for optimum docs display.
+ * Extra styles for displaying wordmarks, logos, etc.
  */
 
- /* About page */
- .bs-about {
-  font-size: 16px;
- }
-
-.bs-brand {
-  padding-top: 15px;
-  overflow: hidden; /* clearfix */
+/* Logo series wrapper */
+.bs-brand-logos {
+  display: table;
+  width: 100%;
+  margin-bottom: 15px;
+  overflow: hidden;
+  color: #563d7c;
+  background-color: #f9f9f9;
   border-radius: 4px;
 }
-.bs-brand:after {
-  display: none;
-}
-.bs-brand h1 {
-  margin: 40px 0;
-  font-size: 70px;
+
+/* Individual items */
+.bs-brand-item {
+  display: table-cell;
+  width: 1%;
+  padding: 60px 0;
   text-align: center;
-  color: #563d7c;
 }
+.bs-brand-item + .bs-brand-item {
+  border-left: 1px solid #fff;
+}
+.bs-brand-logos .inverse {
+  color: #fff;
+  background-color: #563d7c;
+}
+
+/* Heading content within */
+.bs-brand-item h1,
+.bs-brand-item h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.bs-brand-item h1 {
+  font-size: 60px;
+}
+.bs-brand-item .bs-booticon {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Make the icons stand out on what is/isn't okay */
+.bs-brand-item .glyphicon {
+  width: 30px;
+  height: 30px;
+  margin-top: 10px;
+  line-height: 30px;
+  color: #fff;
+  border-radius: 50%;
+}
+.bs-brand-item .glyphicon-ok { background-color: #5cb85c; }
+.bs-brand-item .glyphicon-remove { background-color: #d9534f; }
+
+
 @media (min-width: 768px) {
-  .bs-brand h1 {
+/*  .bs-brand-logos .default,
+  .bs-brand-logos .inverse {
     float: left;
     width: 50%;
   }
-}
+*/}
+
+
+/*
+ * Miscellaneous
+ *
+ * Odds and ends for optimum docs display.
+ */
 
 /* Examples gallery: space out content better */
 .bs-examples .thumbnail {
@@ -1308,9 +1362,3 @@ h1[id] {
   -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
        box-shadow: 0 0 8px rgba(82,168,236,.6);
 }
-
-/* Better spacing on download options in getting started */
-.bs-docs-dl-options h4 {
-  margin-top: 15px;
-  margin-bottom: 5px;
-}