diff --git a/_includes/docs-navbar.html b/_includes/docs-navbar.html
index 6000c35b85f9e20c23b0c41398eb36cfaf08bbc1..eb4be14743a3c27fc886abd9ea25e7e1fffa318a 100644
--- a/_includes/docs-navbar.html
+++ b/_includes/docs-navbar.html
@@ -59,5 +59,5 @@
     </li>
   </ul>
 
-  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
+  <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
 </header>
diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss
index 82027459fa95f13fe20add5e8568a899d98bc089..9be5f3cfe28a02448589c17341cd7244b132e192 100644
--- a/assets/scss/_buttons.scss
+++ b/assets/scss/_buttons.scss
@@ -2,7 +2,7 @@
 //
 // Custom buttons for the docs.
 
-.btn-bd-purple {
+.btn-bd-primary {
   font-weight: 500;
   color: $bd-purple-bright;
   border-color: $bd-purple-bright;
@@ -15,15 +15,15 @@
   }
 }
 
-.btn-bd-yellow {
+.btn-bd-download {
   font-weight: 500;
-  color: $bd-yellow;
-  border-color: $bd-yellow;
+  color: $bd-download;
+  border-color: $bd-download;
 
   &:hover,
   &:active {
-    color: $bd-graphite;
-    background-color: $bd-yellow;
-    border-color: $bd-yellow;
+    color: $bd-dark;
+    background-color: $bd-download;
+    border-color: $bd-download;
   }
 }
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index e3aed2e8257d4023b973e303fd5c1436d601d958..b60a21368b60b3b1b4c1778b7dae360506d49fe4 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -1,9 +1,9 @@
 // Local docs variables
-$bd-purple:          #563d7c;
-$bd-purple-bright:   lighten(saturate($bd-purple, 5%), 15%);
-$bd-purple-light:    #cdbfe3;
-$bd-graphite:        #2a2730;
-$bd-yellow:          #ffe484;
-$bd-danger:          #d9534f;
-$bd-warning:         #f0ad4e;
-$bd-info:            #5bc0de;
+$bd-purple:        #563d7c !default;
+$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%) !default;
+$bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%) !default;
+$bd-dark:          #2a2730 !default;
+$bd-download:      #ffe484 !default;
+$bd-info:          #5bc0de !default;
+$bd-warning:       #f0ad4e !default;
+$bd-danger:        #d9534f !default;
diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md
index c93d6dc34ab9c9446af68708d676141b748f30eb..de40145f7fa315e4994cbfb66bc13217f99342c5 100644
--- a/docs/4.0/getting-started/download.md
+++ b/docs/4.0/getting-started/download.md
@@ -15,7 +15,7 @@ Download ready-to-use compiled code for **Bootstrap v{{ site.current_version}}**
 
 This doesn't include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).
 
-<a href="{{ site.download.dist }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a>
+<a href="{{ site.download.dist }}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a>
 
 ## Source files
 
@@ -26,7 +26,7 @@ Compile Bootstrap with your own asset pipeline by downloading our source Sass, J
 
 Should you require [build tools]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
 
-<a href="{{ site.download.source }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
+<a href="{{ site.download.source }}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
 
 ## Bootstrap CDN
 
diff --git a/index.html b/index.html
index 62fdc71d148f1d09de3bd32f729beb3c9fb6c485..54b069fd92ecef22bb82fadc488af16c283aeff2 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@ layout: home
           Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
         </p>
         <div class="d-flex flex-column flex-md-row lead mb-3">
-          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-purple mb-3 mb-md-0 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
+          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary mb-3 mb-md-0 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
           <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
         </div>
         <p class="text-muted mb-0">