First pass at cleaning up About pages and brand assets

2 files changed, 33 insertions, 48 deletions

diff --git a/site/content/docs/5.0/about/brand.md b/site/content/docs/5.0/about/brand.md
index 290f92e3ff..636d37a898 100644
--- a/site/content/docs/5.0/about/brand.md
+++ b/site/content/docs/5.0/about/brand.md
@@ -8,69 +8,52 @@ toc: true
 
 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 [Brand Assets](https://mailchimp.com/about/brand-assets/).
 
-## Mark and logo
+## Logo
 
-Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in San Francisco Display Semibold. **Do not use the Twitter bird** in association with Bootstrap.
+When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. **Do not use the Twitter name or logo** in association with Bootstrap.
 
-<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
-  <div class="bd-brand-item w-100">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
-  </div>
-  <div class="bd-brand-item w-100 inverse">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
-  </div>
-</div>
-<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
-  <div class="bd-brand-item w-100">
-    <span class="h1">Bootstrap</span>
-  </div>
-  <div class="bd-brand-item w-100 inverse">
-    <span class="h1">Bootstrap</span>
-  </div>
+<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
+  <img class="d-block mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="512" height="408" loading="lazy">
 </div>
 
-## Download mark
+Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.
 
-Download the Bootstrap mark in one of three styles, each available as an SVG file. **Click to download the logos**.
-
-<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
-  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" download class="bd-brand-item w-100" title="Download solid logo">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
-  </a>
-  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" download class="bd-brand-item w-100 inverse" title="Download outlined logo">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
-  </a>
-  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" download class="bd-brand-item w-100 inverse" title="Download inverted logo">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
-  </a>
+<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
+  <div class="bd-brand-item w-100 px-2 py-5">
+    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-black.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
+  </div>
+  <div class="bd-brand-item w-100 px-2 py-5 inverse">
+    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
+  </div>
 </div>
 
 ## Name
 
-The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
+Bootstrap should always be referred to as just **Bootstrap**. No Twitter before it and no capital _s_.
 
-<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
-  <div class="bd-brand-item w-100">
-    <span class="h3">Bootstrap</span>
-    <strong class="text-success">Right</strong>
+<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
+  <div class="bd-brand-item w-100 p-3">
+    <div class="h3">Bootstrap</div>
+    <strong class="text-success">Correct</strong>
   </div>
-  <div class="bd-brand-item w-100">
-    <span class="h3 text-muted">BootStrap</span>
-    <strong class="text-warning">Wrong</strong>
+  <div class="bd-brand-item w-100 p-3">
+    <div class="h3 text-muted">BootStrap</div>
+    <strong class="text-danger">Incorrect</strong>
   </div>
-  <div class="bd-brand-item w-100">
-    <span class="h3 text-muted">Twitter Bootstrap</span>
-    <strong class="text-warning">Wrong</strong>
+  <div class="bd-brand-item w-100 p-3">
+    <div class="h3 text-muted">Twitter Bootstrap</div>
+    <strong class="text-danger">Incorrect</strong>
   </div>
 </div>
 
-## Colors
+## Bootstrap projects
 
-Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
+Official Bootstrap side projects use and extend our primary logo.
+
+<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
+  <img class="d-block mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-icons-logo.svg" alt="Bootstrap Icons" width="512" height="408" loading="lazy">
+</div>
 
-<div class="color-swatches d-flex">
-  <div class="color-swatch bd-purple rounded mx-1"></div>
-  <div class="color-swatch bd-purple-light rounded mx-1"></div>
-  <div class="color-swatch bd-purple-lighter rounded mx-1"></div>
-  <div class="color-swatch bd-gray rounded mx-1"></div>
+<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
+  <img class="d-block mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-npm-logo.svg" alt="Bootstrap Icons" width="512" height="408" loading="lazy">
 </div>
diff --git a/site/content/docs/5.0/about/overview.md b/site/content/docs/5.0/about/overview.md
index ef10e40557..ca90aedcb8 100644
--- a/site/content/docs/5.0/about/overview.md
+++ b/site/content/docs/5.0/about/overview.md
@@ -22,6 +22,8 @@ Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-
 
 With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS's flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
 
+Our latest release, Bootstrap 5 (currently in development), focuses on improving v4's codebase with as few major breaking chanages as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.
+
 ## Get involved
 
 Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.