diff --git a/_includes/nav-about.html b/_includes/nav-about.html
index f0f4a5b8a6..345ef164d3 100644
--- a/_includes/nav-about.html
+++ b/_includes/nav-about.html
@@ -1,3 +1,6 @@
+<li>
+  <a href="#brand">Brand guidelines</a>
+</li>
 <li>
   <a href="#history">History</a>
 </li>
diff --git a/about.html b/about.html
index ea0e2f31dd..a61098d21a 100644
--- a/about.html
+++ b/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>
 
 
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index a4e6b28910..9a56e59097 100644
--- a/docs-assets/css/docs.css
+++ b/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
@@ -1257,38 +1269,80 @@ h1[id] {
 }
 
 
+/*
+ * Brand guidelines
+ *
+ * Extra styles for displaying wordmarks, logos, etc.
+ */
+
+/* Logo series wrapper */
+.bs-brand-logos {
+  display: table;
+  width: 100%;
+  margin-bottom: 15px;
+  overflow: hidden;
+  color: #563d7c;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
+
+/* Individual items */
+.bs-brand-item {
+  display: table-cell;
+  width: 1%;
+  padding: 60px 0;
+  text-align: center;
+}
+.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-logos .default,
+  .bs-brand-logos .inverse {
+    float: left;
+    width: 50%;
+  }
+*/}
+
+
 /*
  * Miscellaneous
  *
  * Odds and ends for optimum docs display.
  */
 
- /* About page */
- .bs-about {
-  font-size: 16px;
- }
-
-.bs-brand {
-  padding-top: 15px;
-  overflow: hidden; /* clearfix */
-  border-radius: 4px;
-}
-.bs-brand:after {
-  display: none;
-}
-.bs-brand h1 {
-  margin: 40px 0;
-  font-size: 70px;
-  text-align: center;
-  color: #563d7c;
-}
-@media (min-width: 768px) {
-  .bs-brand h1 {
-    float: left;
-    width: 50%;
-  }
-}
-
 /* Examples gallery: space out content better */
 .bs-examples .thumbnail {
   margin-bottom: 10px;
@@ -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;
-}