diff --git a/_includes/header.html b/_includes/header.html
index 4658bcbd..c3870e9b 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,4 +1,4 @@
-<header id="analytics-header" class="grid-row">
+<header id="analytics-header" class="grid-row padding-3">
   <h1>
     <img
       src="{{ site.baseurl }}/images/analytics.svg"
diff --git a/js/components/agency_select/AgencySelect.js b/js/components/agency_select/AgencySelect.js
index 20beebda..5eb9d30d 100644
--- a/js/components/agency_select/AgencySelect.js
+++ b/js/components/agency_select/AgencySelect.js
@@ -44,7 +44,10 @@ function AgencySelect({ mainAgencyName, agencies, pathSuffix = "" }) {
 
   return (
     <>
-      <label className="usa-label" htmlFor="analytics-agency-select">
+      <label
+        className="usa-label text--centered margin-y-1"
+        htmlFor="analytics-agency-select"
+      >
         Select an agency to display results
       </label>
       <select
diff --git a/js/components/agency_select/__tests__/__snapshots__/AgencySelect.spec.js.snap b/js/components/agency_select/__tests__/__snapshots__/AgencySelect.spec.js.snap
index 724c1b42..5524f9d8 100644
--- a/js/components/agency_select/__tests__/__snapshots__/AgencySelect.spec.js.snap
+++ b/js/components/agency_select/__tests__/__snapshots__/AgencySelect.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`AgencySelect when all params are provided and subagencies do not exist renders 1`] = `
 [
   <label
-    className="usa-label"
+    className="usa-label text--centered margin-y-1"
     htmlFor="analytics-agency-select"
   >
     Select an agency to display results
@@ -34,7 +34,7 @@ exports[`AgencySelect when all params are provided and subagencies do not exist
 exports[`AgencySelect when all params are provided and subagencies exist renders 1`] = `
 [
   <label
-    className="usa-label"
+    className="usa-label text--centered margin-y-1"
     htmlFor="analytics-agency-select"
   >
     Select an agency to display results
@@ -79,7 +79,7 @@ exports[`AgencySelect when all params are provided and subagencies exist renders
 exports[`AgencySelect when optional params are not provided renders 1`] = `
 [
   <label
-    className="usa-label"
+    className="usa-label text--centered margin-y-1"
     htmlFor="analytics-agency-select"
   >
     Select an agency to display results
diff --git a/js/components/chart/ConsolidatedBarChart.js b/js/components/chart/ConsolidatedBarChart.js
index 9ebb2817..4df00308 100644
--- a/js/components/chart/ConsolidatedBarChart.js
+++ b/js/components/chart/ConsolidatedBarChart.js
@@ -41,7 +41,7 @@ function ConsolidatedBarChart({ dataUrl, chartDataKey, maxItems }) {
 
   return (
     <figure id={`chart_${chartDataKey}`} ref={ref}>
-      <div className="data chart__bar-chart"></div>
+      <div className="data chart__bar-chart margin-top-4"></div>
     </figure>
   );
 }
diff --git a/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap b/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap
index 4e05f24a..efc2bd40 100644
--- a/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap
+++ b/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap
@@ -6,7 +6,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key does not
     id="chart_browser"
   >
     <div
-      class="data chart__bar-chart"
+      class="data chart__bar-chart margin-top-4"
     />
   </figure>
 </DocumentFragment>
@@ -18,13 +18,13 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
     id="chart_browser"
   >
     <div
-      class="data chart__bar-chart"
+      class="data chart__bar-chart margin-top-4"
     >
       <div
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Chrome
         </div>
@@ -34,7 +34,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           48.5%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 49%;"
         />
       </div>
@@ -42,7 +42,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Safari
         </div>
@@ -52,7 +52,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           35.7%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 36%;"
         />
       </div>
@@ -60,7 +60,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Edge
         </div>
@@ -70,7 +70,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           8.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 9%;"
         />
       </div>
@@ -78,7 +78,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Firefox
         </div>
@@ -88,7 +88,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 2%;"
         />
       </div>
@@ -96,7 +96,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Safari (in-app)
         </div>
@@ -106,7 +106,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 2%;"
         />
       </div>
@@ -114,7 +114,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Samsung Internet
         </div>
@@ -124,7 +124,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 1%;"
         />
       </div>
@@ -132,7 +132,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Android Webview
         </div>
@@ -142,7 +142,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 1%;"
         />
       </div>
@@ -150,7 +150,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Opera
         </div>
@@ -160,7 +160,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -168,7 +168,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Amazon Silk
         </div>
@@ -178,7 +178,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -186,7 +186,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Other
         </div>
@@ -196,7 +196,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -211,13 +211,13 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
     id="chart_browser"
   >
     <div
-      class="data chart__bar-chart"
+      class="data chart__bar-chart margin-top-4"
     >
       <div
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Chrome
         </div>
@@ -227,7 +227,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           48.7%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 49%;"
         />
       </div>
@@ -235,7 +235,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Safari
         </div>
@@ -245,7 +245,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           35.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 36%;"
         />
       </div>
@@ -253,7 +253,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Edge
         </div>
@@ -263,7 +263,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           8.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 9%;"
         />
       </div>
@@ -271,7 +271,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Firefox
         </div>
@@ -281,7 +281,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 2%;"
         />
       </div>
@@ -289,7 +289,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Safari (in-app)
         </div>
@@ -299,7 +299,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 2%;"
         />
       </div>
@@ -307,7 +307,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Samsung Internet
         </div>
@@ -317,7 +317,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 1%;"
         />
       </div>
@@ -325,7 +325,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Android Webview
         </div>
@@ -335,7 +335,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 1%;"
         />
       </div>
@@ -343,7 +343,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Opera
         </div>
@@ -353,7 +353,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -361,7 +361,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Amazon Silk
         </div>
@@ -371,7 +371,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -386,7 +386,7 @@ exports[`ConsolidatedBarChart when data is not loaded renders a component in loa
     id="chart_browser"
   >
     <div
-      class="data chart__bar-chart"
+      class="data chart__bar-chart margin-top-4"
     />
   </figure>
 </DocumentFragment>
@@ -398,7 +398,7 @@ exports[`ConsolidatedBarChart when data loading has an error renders a component
     id="chart_browser"
   >
     <div
-      class="data chart__bar-chart"
+      class="data chart__bar-chart margin-top-4"
     />
   </figure>
 </DocumentFragment>
diff --git a/js/components/dashboard_content/BrowsersChart.js b/js/components/dashboard_content/BrowsersChart.js
index c3fd317d..ff3f0ef0 100644
--- a/js/components/dashboard_content/BrowsersChart.js
+++ b/js/components/dashboard_content/BrowsersChart.js
@@ -43,7 +43,7 @@ function BrowsersChart({ dataHrefBase }) {
         <a href="/definitions#dimension_browser">Web Browsers</a>
       </div>
       <figure id="chart_browsers" ref={ref}>
-        <div className="data chart__bar-chart text--capitalize"></div>
+        <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
       </figure>
     </>
   );
diff --git a/js/components/dashboard_content/DevicesChart.js b/js/components/dashboard_content/DevicesChart.js
index 2efad845..5c788108 100644
--- a/js/components/dashboard_content/DevicesChart.js
+++ b/js/components/dashboard_content/DevicesChart.js
@@ -59,7 +59,7 @@ function DevicesChart({ dataHrefBase }) {
         <a href="/definitions#dimension_device_category">Devices</a>
       </div>
       <figure id="chart_device_types" ref={ref}>
-        <div className="data chart__bar-chart text--capitalize"></div>
+        <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
       </figure>
     </>
   );
diff --git a/js/components/dashboard_content/OperatingSystemsChart.js b/js/components/dashboard_content/OperatingSystemsChart.js
index 575884b6..1db78d5f 100644
--- a/js/components/dashboard_content/OperatingSystemsChart.js
+++ b/js/components/dashboard_content/OperatingSystemsChart.js
@@ -62,7 +62,7 @@ function OperatingSystemsChart({ dataHrefBase }) {
         <a href="/definitions#dimension_operating_system">Operating Systems</a>
       </div>
       <figure id="chart_os" ref={osRef}>
-        <div className="data chart__bar-chart text--capitalize"></div>
+        <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
       </figure>
       <figure
         id="chart_windows"
@@ -70,7 +70,7 @@ function OperatingSystemsChart({ dataHrefBase }) {
         data-scale-to-parent="true"
         ref={windowsRef}
       >
-        <div className="data chart__bar-chart text--capitalize"></div>
+        <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
       </figure>
     </div>
   );
diff --git a/js/components/dashboard_content/TopCitiesRealtime.js b/js/components/dashboard_content/TopCitiesRealtime.js
index 5cd327a1..ff0d4dcd 100644
--- a/js/components/dashboard_content/TopCitiesRealtime.js
+++ b/js/components/dashboard_content/TopCitiesRealtime.js
@@ -64,7 +64,7 @@ function TopCitiesRealtime({ dataHrefBase, refreshSeconds }) {
         <a href="/definitions#dimension_city">Cities</a>
       </div>
       <figure id="chart_top-cities-realtime" ref={ref}>
-        <div className="data chart__bar-chart"></div>
+        <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
       </figure>
     </>
   );
diff --git a/js/components/dashboard_content/TopCountriesRealtime.js b/js/components/dashboard_content/TopCountriesRealtime.js
index cf2b838e..5c237476 100644
--- a/js/components/dashboard_content/TopCountriesRealtime.js
+++ b/js/components/dashboard_content/TopCountriesRealtime.js
@@ -150,7 +150,7 @@ function TopCountriesRealtime({ dataHrefBase, refreshSeconds }) {
         <a href="/definitions#dimension_country">Countries</a>
       </div>
       <figure id="chart_us" ref={countriesRef}>
-        <div className="data chart__bar-chart text--capitalize"></div>
+        <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
       </figure>
 
       <figure
@@ -158,7 +158,7 @@ function TopCountriesRealtime({ dataHrefBase, refreshSeconds }) {
         className="hide chart__bar-chart__nested"
         ref={usTerritoriesRef}
       >
-        <div className="data chart__bar-chart text--capitalize"></div>
+        <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
       </figure>
 
       <figure
@@ -166,7 +166,7 @@ function TopCountriesRealtime({ dataHrefBase, refreshSeconds }) {
         className="hide chart__bar-chart__nested"
         ref={internationalVisitsRef}
       >
-        <div className="data chart__bar-chart text--capitalize"></div>
+        <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
       </figure>
     </div>
   );
diff --git a/js/components/dashboard_content/TopDownloads.js b/js/components/dashboard_content/TopDownloads.js
index 8c291acb..33468ae5 100644
--- a/js/components/dashboard_content/TopDownloads.js
+++ b/js/components/dashboard_content/TopDownloads.js
@@ -82,7 +82,7 @@ function TopDownloads({
 
   return (
     <figure className="top-downloads__bar-chart" ref={ref}>
-      <div className="data chart__bar-chart text--capitalize"></div>
+      <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
     </figure>
   );
 }
diff --git a/js/components/dashboard_content/TopLanguagesHistorical.js b/js/components/dashboard_content/TopLanguagesHistorical.js
index f95b809e..5b2a27a7 100644
--- a/js/components/dashboard_content/TopLanguagesHistorical.js
+++ b/js/components/dashboard_content/TopLanguagesHistorical.js
@@ -73,7 +73,7 @@ function TopLanguagesHistorical({ dataHrefBase }) {
         <a href="/definitions#dimension_language">Languages</a>
       </div>
       <figure id="chart_top-languages" ref={ref}>
-        <div className="data chart__bar-chart text--capitalize"></div>
+        <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
       </figure>
     </>
   );
diff --git a/js/components/dashboard_content/TopPagesHistorical.js b/js/components/dashboard_content/TopPagesHistorical.js
index 053c0a25..a8a20a6e 100644
--- a/js/components/dashboard_content/TopPagesHistorical.js
+++ b/js/components/dashboard_content/TopPagesHistorical.js
@@ -76,7 +76,7 @@ function TopPagesHistorical({
 
   return (
     <figure data-source={dataURL} ref={ref}>
-      <div className="data chart__bar-chart text--lowercase"></div>
+      <div className="data chart__bar-chart text--lowercase margin-top-4"></div>
     </figure>
   );
 }
diff --git a/js/components/dashboard_content/TopPagesRealtime.js b/js/components/dashboard_content/TopPagesRealtime.js
index a912803d..3aba147a 100644
--- a/js/components/dashboard_content/TopPagesRealtime.js
+++ b/js/components/dashboard_content/TopPagesRealtime.js
@@ -81,7 +81,7 @@ function TopPagesRealtime({
 
   return (
     <figure ref={ref}>
-      <div className="data chart__bar-chart text--capitalize"></div>
+      <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
     </figure>
   );
 }
diff --git a/js/components/dashboard_content/TopVideoPlays.js b/js/components/dashboard_content/TopVideoPlays.js
index b70a86f5..564c2b72 100644
--- a/js/components/dashboard_content/TopVideoPlays.js
+++ b/js/components/dashboard_content/TopVideoPlays.js
@@ -61,7 +61,7 @@ function TopVideoPlays({ videoPlayData, numberOfListingsToDisplay }) {
 
   return (
     <figure className="top-video-plays__bar-chart" ref={ref}>
-      <div className="data chart__bar-chart text--capitalize"></div>
+      <div className="data chart__bar-chart text--capitalize margin-top-4"></div>
     </figure>
   );
 }
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap
index 924e230b..86826f3f 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap
@@ -15,13 +15,13 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
     id="chart_browsers"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     >
       <div
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Chrome
         </div>
@@ -31,7 +31,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           48.7%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 49%;"
         />
       </div>
@@ -39,7 +39,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Safari
         </div>
@@ -49,7 +49,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           35.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 36%;"
         />
       </div>
@@ -57,7 +57,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Edge
         </div>
@@ -67,7 +67,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           8.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 9%;"
         />
       </div>
@@ -75,7 +75,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Firefox
         </div>
@@ -85,7 +85,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 2%;"
         />
       </div>
@@ -93,7 +93,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Safari (in-app)
         </div>
@@ -103,7 +103,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 2%;"
         />
       </div>
@@ -111,7 +111,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Samsung Internet
         </div>
@@ -121,7 +121,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           1.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 1%;"
         />
       </div>
@@ -129,7 +129,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Android Webview
         </div>
@@ -139,7 +139,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           1%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 1%;"
         />
       </div>
@@ -147,7 +147,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Opera
         </div>
@@ -157,7 +157,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -165,7 +165,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Amazon Silk
         </div>
@@ -175,7 +175,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -183,7 +183,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Internet Explorer
         </div>
@@ -193,7 +193,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -217,7 +217,7 @@ exports[`BrowsersChart when data is not loaded renders a component in loading st
     id="chart_browsers"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
@@ -238,7 +238,7 @@ exports[`BrowsersChart when data loading has an error renders a component in err
     id="chart_browsers"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap
index 3c1375b7..464ae323 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap
@@ -22,7 +22,7 @@ exports[`DeviceDemographics renders 1`] = `
         id="chart_device_types"
       >
         <div
-          class="data chart__bar-chart text--capitalize"
+          class="data chart__bar-chart text--capitalize margin-top-4"
         />
       </figure>
       <div
@@ -41,7 +41,7 @@ exports[`DeviceDemographics renders 1`] = `
           id="chart_screen_resolution"
         >
           <div
-            class="data chart__bar-chart"
+            class="data chart__bar-chart margin-top-4"
           />
         </figure>
       </div>
@@ -63,7 +63,7 @@ exports[`DeviceDemographics renders 1`] = `
         id="chart_browsers"
       >
         <div
-          class="data chart__bar-chart text--capitalize"
+          class="data chart__bar-chart text--capitalize margin-top-4"
         />
       </figure>
     </div>
@@ -85,7 +85,7 @@ exports[`DeviceDemographics renders 1`] = `
           id="chart_os"
         >
           <div
-            class="data chart__bar-chart text--capitalize"
+            class="data chart__bar-chart text--capitalize margin-top-4"
           />
         </figure>
         <figure
@@ -94,7 +94,7 @@ exports[`DeviceDemographics renders 1`] = `
           id="chart_windows"
         >
           <div
-            class="data chart__bar-chart text--capitalize"
+            class="data chart__bar-chart text--capitalize margin-top-4"
           />
         </figure>
       </div>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap
index 0f9510ae..516eeb7c 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap
@@ -15,13 +15,13 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
     id="chart_device_types"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     >
       <div
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           mobile
         </div>
@@ -31,7 +31,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
           54.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 54%;"
         />
       </div>
@@ -39,7 +39,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           desktop
         </div>
@@ -49,7 +49,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
           44%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 44%;"
         />
       </div>
@@ -57,7 +57,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           tablet
         </div>
@@ -67,7 +67,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
           1.3%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 1%;"
         />
       </div>
@@ -75,7 +75,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Smart TV
         </div>
@@ -85,7 +85,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -93,7 +93,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           (other)
         </div>
@@ -103,7 +103,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -127,7 +127,7 @@ exports[`DevicesChart when data is not loaded renders a component in loading sta
     id="chart_device_types"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
@@ -148,7 +148,7 @@ exports[`DevicesChart when data loading has an error renders a component in erro
     id="chart_device_types"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/LocationsAndLanguages.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/LocationsAndLanguages.spec.js.snap
index 57d1c1c8..dee29ece 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/LocationsAndLanguages.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/LocationsAndLanguages.spec.js.snap
@@ -31,7 +31,7 @@ exports[`LocationsAndLanguages renders 1`] = `
         id="chart_top-cities-realtime"
       >
         <div
-          class="data chart__bar-chart"
+          class="data chart__bar-chart text--capitalize margin-top-4"
         />
       </figure>
     </div>
@@ -53,7 +53,7 @@ exports[`LocationsAndLanguages renders 1`] = `
           id="chart_us"
         >
           <div
-            class="data chart__bar-chart text--capitalize"
+            class="data chart__bar-chart text--capitalize margin-top-4"
           />
         </figure>
         <figure
@@ -61,7 +61,7 @@ exports[`LocationsAndLanguages renders 1`] = `
           id="chart_us_and_territories"
         >
           <div
-            class="data chart__bar-chart text--capitalize"
+            class="data chart__bar-chart text--capitalize margin-top-4"
           />
         </figure>
         <figure
@@ -69,7 +69,7 @@ exports[`LocationsAndLanguages renders 1`] = `
           id="chart_countries"
         >
           <div
-            class="data chart__bar-chart text--capitalize"
+            class="data chart__bar-chart text--capitalize margin-top-4"
           />
         </figure>
       </div>
@@ -91,7 +91,7 @@ exports[`LocationsAndLanguages renders 1`] = `
         id="chart_top-languages"
       >
         <div
-          class="data chart__bar-chart text--capitalize"
+          class="data chart__bar-chart text--capitalize margin-top-4"
         />
       </figure>
     </div>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/OperatingSystemsChart.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/OperatingSystemsChart.spec.js.snap
index a2c92aa6..061fee21 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/OperatingSystemsChart.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/OperatingSystemsChart.spec.js.snap
@@ -16,13 +16,13 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
       id="chart_os"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       >
         <div
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             iOS
           </div>
@@ -32,7 +32,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
             36.6%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 37%;"
           />
         </div>
@@ -40,7 +40,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             Windows
           </div>
@@ -50,7 +50,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
             29.9%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 30%;"
           />
           <figure
@@ -59,14 +59,14 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
             id="chart_windows"
           >
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="data chart__bar-chart text--capitalize margin-top-4"
             >
               <div
                 class="chart__bar-chart__item"
                 data-share="22.82190215063274"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   10
                 </div>
@@ -76,7 +76,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
                   22.8%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 76%;"
                 />
               </div>
@@ -85,7 +85,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
                 data-share="5.590931679869998"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   11
                 </div>
@@ -95,7 +95,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
                   5.6%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 19%;"
                 />
               </div>
@@ -104,7 +104,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
                 data-share="0.82591327878594"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   2000
                 </div>
@@ -114,7 +114,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
                   0.8%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 3%;"
                 />
               </div>
@@ -123,7 +123,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
                 data-share="0.31608292810730126"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   8
                 </div>
@@ -133,7 +133,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
                   0.3%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 1%;"
                 />
               </div>
@@ -142,7 +142,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
                 data-share="0.268696410359494"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   7
                 </div>
@@ -152,7 +152,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
                   0.3%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 1%;"
                 />
               </div>
@@ -161,7 +161,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
                 data-share="0.11880742089218736"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   8.1
                 </div>
@@ -171,7 +171,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
                   0.1%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 0%;"
                 />
               </div>
@@ -182,7 +182,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             Android
           </div>
@@ -192,7 +192,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
             19.3%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 19%;"
           />
         </div>
@@ -200,7 +200,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             Macintosh
           </div>
@@ -210,7 +210,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
             10%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 10%;"
           />
         </div>
@@ -218,7 +218,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             Linux
           </div>
@@ -228,7 +228,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
             2.2%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 2%;"
           />
         </div>
@@ -236,7 +236,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             Chrome OS
           </div>
@@ -246,7 +246,7 @@ exports[`OperatingSystemsChart when data is loaded renders a component with data
             1.9%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 2%;"
           />
         </div>
@@ -272,7 +272,7 @@ exports[`OperatingSystemsChart when data is not loaded renders a component in lo
       id="chart_os"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
     <figure
@@ -281,7 +281,7 @@ exports[`OperatingSystemsChart when data is not loaded renders a component in lo
       id="chart_windows"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
   </div>
@@ -304,7 +304,7 @@ exports[`OperatingSystemsChart when data loading has an error renders a componen
       id="chart_os"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
     <figure
@@ -313,7 +313,7 @@ exports[`OperatingSystemsChart when data loading has an error renders a componen
       id="chart_windows"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
   </div>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/SidebarContent.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/SidebarContent.spec.js.snap
index 1dd2c8a3..dc478df0 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/SidebarContent.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/SidebarContent.spec.js.snap
@@ -100,7 +100,7 @@ exports[`SidebarContent when 7 days tab is selected renders a component with top
             data-source="http://www.example.com/data//top-domains-7-days.json"
           >
             <div
-              class="data chart__bar-chart text--lowercase"
+              class="data chart__bar-chart text--lowercase margin-top-4"
             />
           </figure>
         </section>
@@ -127,7 +127,7 @@ exports[`SidebarContent when 7 days tab is selected renders a component with top
             class="top-downloads__bar-chart"
           >
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="data chart__bar-chart text--capitalize margin-top-4"
             />
           </figure>
         </section>
@@ -272,7 +272,7 @@ exports[`SidebarContent when 30 days tab is selected renders a component with to
             data-source="http://www.example.com/data//top-domains-30-days.json"
           >
             <div
-              class="data chart__bar-chart text--lowercase"
+              class="data chart__bar-chart text--lowercase margin-top-4"
             />
           </figure>
         </section>
@@ -299,7 +299,7 @@ exports[`SidebarContent when 30 days tab is selected renders a component with to
             class="top-downloads__bar-chart"
           >
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="data chart__bar-chart text--capitalize margin-top-4"
             />
           </figure>
         </section>
@@ -421,7 +421,7 @@ exports[`SidebarContent when 30 minutes tab is selected renders a component with
           </p>
           <figure>
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="data chart__bar-chart text--capitalize margin-top-4"
             />
           </figure>
         </section>
@@ -448,7 +448,7 @@ exports[`SidebarContent when 30 minutes tab is selected renders a component with
             class="top-downloads__bar-chart"
           >
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="data chart__bar-chart text--capitalize margin-top-4"
             />
           </figure>
         </section>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap
index 6e8919e2..3e6d66e3 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap
@@ -15,13 +15,13 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
     id="chart_top-cities-realtime"
   >
     <div
-      class="data chart__bar-chart"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     >
       <div
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Felixtown
         </div>
@@ -31,7 +31,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           2.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 2%;"
         />
       </div>
@@ -39,7 +39,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           New Alejandrachester
         </div>
@@ -49,7 +49,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           5%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 5%;"
         />
       </div>
@@ -57,7 +57,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           New Penelopeport
         </div>
@@ -67,7 +67,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           6.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 6%;"
         />
       </div>
@@ -75,7 +75,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Erynfort
         </div>
@@ -85,7 +85,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           1.6%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 2%;"
         />
       </div>
@@ -93,7 +93,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Palm Bay
         </div>
@@ -103,7 +103,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           7.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 8%;"
         />
       </div>
@@ -111,7 +111,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Lake Taya
         </div>
@@ -121,7 +121,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           0.5%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -129,7 +129,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Alexanebury
         </div>
@@ -139,7 +139,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           2%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 2%;"
         />
       </div>
@@ -147,7 +147,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           West Julianabury
         </div>
@@ -157,7 +157,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           8.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 8%;"
         />
       </div>
@@ -165,7 +165,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Rodriguezshire
         </div>
@@ -175,7 +175,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           4.7%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 5%;"
         />
       </div>
@@ -183,7 +183,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Fort Althea
         </div>
@@ -193,7 +193,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           4.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 5%;"
         />
       </div>
@@ -201,7 +201,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           East Catalinachester
         </div>
@@ -211,7 +211,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           1%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 1%;"
         />
       </div>
@@ -219,7 +219,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Port Reystad
         </div>
@@ -229,7 +229,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           2.6%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 3%;"
         />
       </div>
@@ -237,7 +237,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Franciscoboro
         </div>
@@ -247,7 +247,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
           5.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 6%;"
         />
       </div>
@@ -271,7 +271,7 @@ exports[`TopCitiesRealtime when data is not loaded renders a component in loadin
     id="chart_top-cities-realtime"
   >
     <div
-      class="data chart__bar-chart"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
@@ -292,7 +292,7 @@ exports[`TopCitiesRealtime when data loading has an error renders a component in
     id="chart_top-cities-realtime"
   >
     <div
-      class="data chart__bar-chart"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap
index 8ece9522..38670d85 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap
@@ -16,13 +16,13 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
       id="chart_us"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       >
         <div
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             International
           </div>
@@ -32,7 +32,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
             100%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 100%;"
           />
           <figure
@@ -40,14 +40,14 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
             id="chart_countries"
           >
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="data chart__bar-chart text--capitalize margin-top-4"
             >
               <div
                 class="chart__bar-chart__item"
                 data-share="9.698050008324927"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Saint Vincent and the Grenadines
                 </div>
@@ -57,7 +57,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   9.7%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 10%;"
                 />
               </div>
@@ -66,7 +66,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="9.323918004368139"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Slovakia
                 </div>
@@ -76,7 +76,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   9.3%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 9%;"
                 />
               </div>
@@ -85,7 +85,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="8.973291676052614"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Unknown
                 </div>
@@ -95,7 +95,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   9%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 9%;"
                 />
               </div>
@@ -104,7 +104,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="7.841101632665054"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Curacao
                 </div>
@@ -114,7 +114,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   7.8%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 8%;"
                 />
               </div>
@@ -123,7 +123,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="7.367070507232892"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Portugal
                 </div>
@@ -133,7 +133,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   7.4%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 7%;"
                 />
               </div>
@@ -142,7 +142,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="7.112425687785863"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Sudan
                 </div>
@@ -152,7 +152,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   7.1%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 7%;"
                 />
               </div>
@@ -161,7 +161,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="6.5492688755472415"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   French Polynesia
                 </div>
@@ -171,7 +171,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   6.5%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 7%;"
                 />
               </div>
@@ -180,7 +180,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="6.335758988472424"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Montenegro
                 </div>
@@ -190,7 +190,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   6.3%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 6%;"
                 />
               </div>
@@ -199,7 +199,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="5.262333134188026"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Bahrain
                 </div>
@@ -209,7 +209,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   5.3%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -218,7 +218,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="5.183980882050478"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Cocos (Keeling) Islands
                 </div>
@@ -228,7 +228,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   5.2%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -237,7 +237,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="5.117381467733563"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Eritrea
                 </div>
@@ -247,7 +247,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   5.1%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -256,7 +256,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="5.101711017306053"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Sao Tome and Principe
                 </div>
@@ -266,7 +266,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   5.1%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -275,7 +275,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="4.595359587867154"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Jersey
                 </div>
@@ -285,7 +285,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   4.6%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -294,7 +294,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="4.460201952929885"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Sweden
                 </div>
@@ -304,7 +304,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   4.5%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 4%;"
                 />
               </div>
@@ -313,7 +313,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="7.078146577475687"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Other
                 </div>
@@ -323,7 +323,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                   7.1%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 7%;"
                 />
               </div>
@@ -337,7 +337,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
       id="chart_us_and_territories"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
   </div>
@@ -360,13 +360,13 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
       id="chart_us"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       >
         <div
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             International
           </div>
@@ -376,7 +376,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
             100%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 100%;"
           />
           <figure
@@ -384,14 +384,14 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
             id="chart_countries"
           >
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="data chart__bar-chart text--capitalize margin-top-4"
             >
               <div
                 class="chart__bar-chart__item"
                 data-share="10.14626670573122"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Brunei Darussalam
                 </div>
@@ -401,7 +401,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   10.1%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 10%;"
                 />
               </div>
@@ -410,7 +410,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="9.323657343760566"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Monaco
                 </div>
@@ -420,7 +420,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   9.3%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 9%;"
                 />
               </div>
@@ -429,7 +429,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="9.039688084559735"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   India
                 </div>
@@ -439,7 +439,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   9%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 9%;"
                 />
               </div>
@@ -448,7 +448,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="7.4451781569042845"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Democratic Republic of the Congo
                 </div>
@@ -458,7 +458,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   7.4%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 7%;"
                 />
               </div>
@@ -467,7 +467,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="7.1848730026368575"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Unknown
                 </div>
@@ -477,7 +477,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   7.2%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 7%;"
                 />
               </div>
@@ -486,7 +486,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="7.0642987536904736"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   French Southern Territories
                 </div>
@@ -496,7 +496,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   7.1%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 7%;"
                 />
               </div>
@@ -505,7 +505,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="6.18421942259584"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Guinea-Bissau
                 </div>
@@ -515,7 +515,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   6.2%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 6%;"
                 />
               </div>
@@ -524,7 +524,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="5.919406819769669"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Grenada
                 </div>
@@ -534,7 +534,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   5.9%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 6%;"
                 />
               </div>
@@ -543,7 +543,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="5.314281850758378"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Monaco
                 </div>
@@ -553,7 +553,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   5.3%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -562,7 +562,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="4.988618692389173"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Russian Federation
                 </div>
@@ -572,7 +572,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   5%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -581,7 +581,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="4.845507200649073"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Jersey
                 </div>
@@ -591,7 +591,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   4.8%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -600,7 +600,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="4.566045390006987"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Iceland
                 </div>
@@ -610,7 +610,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   4.6%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -619,7 +619,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="4.160375019720088"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Guinea
                 </div>
@@ -629,7 +629,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   4.2%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 4%;"
                 />
               </div>
@@ -638,7 +638,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="3.804286583579365"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   United States Minor Outlying Islands
                 </div>
@@ -648,7 +648,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   3.8%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 4%;"
                 />
               </div>
@@ -657,7 +657,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="10.013296973248293"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Other
                 </div>
@@ -667,7 +667,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                   10%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 10%;"
                 />
               </div>
@@ -681,7 +681,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
       id="chart_us_and_territories"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
   </div>
@@ -704,13 +704,13 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
       id="chart_us"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       >
         <div
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             International
           </div>
@@ -720,7 +720,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
             88.7%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 89%;"
           />
           <figure
@@ -728,14 +728,14 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
             id="chart_countries"
           >
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="data chart__bar-chart text--capitalize margin-top-4"
             >
               <div
                 class="chart__bar-chart__item"
                 data-share="9.354646504078405"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Zimbabwe
                 </div>
@@ -745,7 +745,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   9.4%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 9%;"
                 />
               </div>
@@ -754,7 +754,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="9.221096751659099"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Malawi
                 </div>
@@ -764,7 +764,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   9.2%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 9%;"
                 />
               </div>
@@ -773,7 +773,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="7.903063425859341"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Kenya
                 </div>
@@ -783,7 +783,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   7.9%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 8%;"
                 />
               </div>
@@ -792,7 +792,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="7.729448747714245"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Jordan
                 </div>
@@ -802,7 +802,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   7.7%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 8%;"
                 />
               </div>
@@ -811,7 +811,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="7.538369871175854"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Lesotho
                 </div>
@@ -821,7 +821,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   7.5%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 8%;"
                 />
               </div>
@@ -830,7 +830,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="6.919931786895687"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Sierra Leone
                 </div>
@@ -840,7 +840,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   6.9%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 7%;"
                 />
               </div>
@@ -849,7 +849,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="6.572702430605494"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Norway
                 </div>
@@ -859,7 +859,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   6.6%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 7%;"
                 />
               </div>
@@ -868,7 +868,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="6.399087752460398"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Turkey
                 </div>
@@ -878,7 +878,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   6.4%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 6%;"
                 />
               </div>
@@ -887,7 +887,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="5.74263935403012"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   India
                 </div>
@@ -897,7 +897,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   5.7%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 6%;"
                 />
               </div>
@@ -906,7 +906,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="5.399519220891291"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Grenada
                 </div>
@@ -916,7 +916,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   5.4%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -925,7 +925,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="4.113332374514598"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Chad
                 </div>
@@ -935,7 +935,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   4.1%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 4%;"
                 />
               </div>
@@ -944,7 +944,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="3.5205769349304514"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Unknown
                 </div>
@@ -954,7 +954,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   3.5%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 4%;"
                 />
               </div>
@@ -963,7 +963,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="2.0114647325923034"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Poland
                 </div>
@@ -973,7 +973,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   2%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 2%;"
                 />
               </div>
@@ -982,7 +982,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="1.8820242033243613"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   North Macedonia
                 </div>
@@ -992,7 +992,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   1.9%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 2%;"
                 />
               </div>
@@ -1001,7 +1001,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="4.434879086108771"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Other
                 </div>
@@ -1011,7 +1011,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   4.4%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 4%;"
                 />
               </div>
@@ -1022,7 +1022,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             United States & Territories
           </div>
@@ -1032,7 +1032,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
             11.3%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 11%;"
           />
           <figure
@@ -1040,14 +1040,14 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
             id="chart_us_and_territories"
           >
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="data chart__bar-chart text--capitalize margin-top-4"
             >
               <div
                 class="chart__bar-chart__item"
                 data-share="10.180600357502415"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   American Samoa
                 </div>
@@ -1057,7 +1057,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   10.2%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 10%;"
                 />
               </div>
@@ -1066,7 +1066,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="1.0766164656571675"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Puerto Rico
                 </div>
@@ -1076,7 +1076,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                   1.1%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 1%;"
                 />
               </div>
@@ -1105,13 +1105,13 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
       id="chart_us"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       >
         <div
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             International
           </div>
@@ -1121,7 +1121,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
             93.5%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 94%;"
           />
           <figure
@@ -1129,14 +1129,14 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
             id="chart_countries"
           >
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="data chart__bar-chart text--capitalize margin-top-4"
             >
               <div
                 class="chart__bar-chart__item"
                 data-share="10.50710035323961"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Cuba
                 </div>
@@ -1146,7 +1146,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   10.5%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 11%;"
                 />
               </div>
@@ -1155,7 +1155,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="8.976790498091558"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Bahamas
                 </div>
@@ -1165,7 +1165,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   9%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 9%;"
                 />
               </div>
@@ -1174,7 +1174,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="8.840473198833598"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   New Zealand
                 </div>
@@ -1184,7 +1184,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   8.8%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 9%;"
                 />
               </div>
@@ -1193,7 +1193,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="8.047462127498163"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Finland
                 </div>
@@ -1203,7 +1203,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   8%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 8%;"
                 />
               </div>
@@ -1212,7 +1212,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="7.768900689884071"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Slovenia
                 </div>
@@ -1222,7 +1222,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   7.8%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 8%;"
                 />
               </div>
@@ -1231,7 +1231,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="6.73644531898248"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Cameroon
                 </div>
@@ -1241,7 +1241,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   6.7%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 7%;"
                 />
               </div>
@@ -1250,7 +1250,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="6.687845238377468"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Costa Rica
                 </div>
@@ -1260,7 +1260,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   6.7%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 7%;"
                 />
               </div>
@@ -1269,7 +1269,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="6.377278869633248"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Chile
                 </div>
@@ -1279,7 +1279,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   6.4%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 6%;"
                 />
               </div>
@@ -1288,7 +1288,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="5.290296579028472"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Bahamas
                 </div>
@@ -1298,7 +1298,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   5.3%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -1307,7 +1307,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="4.305255920912259"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Jersey
                 </div>
@@ -1317,7 +1317,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   4.3%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 4%;"
                 />
               </div>
@@ -1326,7 +1326,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="4.295772978355183"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Burundi
                 </div>
@@ -1336,7 +1336,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   4.3%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 4%;"
                 />
               </div>
@@ -1345,7 +1345,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="4.174865460752471"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Isle of Man
                 </div>
@@ -1355,7 +1355,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   4.2%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 4%;"
                 />
               </div>
@@ -1364,7 +1364,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="3.925938218629241"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Marshall Islands
                 </div>
@@ -1374,7 +1374,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   3.9%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 4%;"
                 />
               </div>
@@ -1383,7 +1383,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="3.2135321590289463"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Fiji
                 </div>
@@ -1393,7 +1393,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   3.2%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 3%;"
                 />
               </div>
@@ -1402,7 +1402,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="4.387046300467035"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   Other
                 </div>
@@ -1412,7 +1412,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   4.4%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 4%;"
                 />
               </div>
@@ -1423,7 +1423,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             United States & Territories
           </div>
@@ -1433,7 +1433,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
             6.5%
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 6%;"
           />
           <figure
@@ -1441,14 +1441,14 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
             id="chart_us_and_territories"
           >
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="data chart__bar-chart text--capitalize margin-top-4"
             >
               <div
                 class="chart__bar-chart__item"
                 data-share="4.750954221094806"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   American Samoa
                 </div>
@@ -1458,7 +1458,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   4.8%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 5%;"
                 />
               </div>
@@ -1467,7 +1467,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="1.7140418671913893"
               >
                 <div
-                  class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
                 >
                   United States
                 </div>
@@ -1477,7 +1477,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                   1.7%
                 </div>
                 <div
-                  class="chart__bar-chart__item__bar"
+                  class="chart__bar-chart__item__bar bg-light-blue"
                   style="width: 2%;"
                 />
               </div>
@@ -1506,7 +1506,7 @@ exports[`TopCountriesRealtime when data is not loaded renders a component in loa
       id="chart_us"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
     <figure
@@ -1514,7 +1514,7 @@ exports[`TopCountriesRealtime when data is not loaded renders a component in loa
       id="chart_us_and_territories"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
     <figure
@@ -1522,7 +1522,7 @@ exports[`TopCountriesRealtime when data is not loaded renders a component in loa
       id="chart_countries"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
   </div>
@@ -1545,7 +1545,7 @@ exports[`TopCountriesRealtime when data loading has an error renders a component
       id="chart_us"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
     <figure
@@ -1553,7 +1553,7 @@ exports[`TopCountriesRealtime when data loading has an error renders a component
       id="chart_us_and_territories"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
     <figure
@@ -1561,7 +1561,7 @@ exports[`TopCountriesRealtime when data loading has an error renders a component
       id="chart_countries"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
   </div>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopDownloads.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopDownloads.spec.js.snap
index 6b978a58..3c64d7d3 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopDownloads.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopDownloads.spec.js.snap
@@ -6,13 +6,13 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
     class="top-downloads__bar-chart"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     >
       <div
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <span
             class="name"
@@ -59,7 +59,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
           8,997
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 99%;"
         />
       </div>
@@ -67,7 +67,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <span
             class="name"
@@ -114,7 +114,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
           9,071
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 100%;"
         />
       </div>
@@ -122,7 +122,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <span
             class="name"
@@ -169,7 +169,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
           8,505
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 94%;"
         />
       </div>
@@ -177,7 +177,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <span
             class="name"
@@ -224,7 +224,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
           7,699
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 85%;"
         />
       </div>
@@ -232,7 +232,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <span
             class="name"
@@ -279,7 +279,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
           1,142
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 13%;"
         />
       </div>
@@ -294,7 +294,7 @@ exports[`TopDownloads when data is not loaded renders a component in loading sta
     class="top-downloads__bar-chart"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
@@ -306,7 +306,7 @@ exports[`TopDownloads when data loading has an error renders a component in erro
     class="top-downloads__bar-chart"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopDownloadsAndVideoPlays.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopDownloadsAndVideoPlays.spec.js.snap
index ffda698b..e299a553 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopDownloadsAndVideoPlays.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopDownloadsAndVideoPlays.spec.js.snap
@@ -25,13 +25,13 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
       class="top-downloads__bar-chart"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       >
         <div
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -78,7 +78,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             9,667
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 100%;"
           />
         </div>
@@ -86,7 +86,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -133,7 +133,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             1,212
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 13%;"
           />
         </div>
@@ -141,7 +141,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -188,7 +188,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             1,322
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 15%;"
           />
         </div>
@@ -196,7 +196,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -243,7 +243,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             9,573
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 99%;"
           />
         </div>
@@ -251,7 +251,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -298,7 +298,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             1,329
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 15%;"
           />
         </div>
@@ -306,7 +306,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -353,7 +353,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             8,748
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 91%;"
           />
         </div>
@@ -361,7 +361,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -408,7 +408,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             462
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 6%;"
           />
         </div>
@@ -416,7 +416,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -463,7 +463,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             5,023
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 52%;"
           />
         </div>
@@ -471,7 +471,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -518,7 +518,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             1,380
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 15%;"
           />
         </div>
@@ -526,7 +526,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -573,7 +573,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             4,697
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 49%;"
           />
         </div>
@@ -599,13 +599,13 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
       class="top-video-plays__bar-chart"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       >
         <div
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://open-territory.name"
@@ -621,7 +621,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             7,410
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 82%;"
           />
         </div>
@@ -629,7 +629,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://athletic-cellar.com"
@@ -645,7 +645,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             9,078
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 100%;"
           />
         </div>
@@ -653,7 +653,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://difficult-resist.net"
@@ -669,7 +669,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             2,177
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 25%;"
           />
         </div>
@@ -677,7 +677,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://haunting-shoes.biz"
@@ -693,7 +693,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             3,888
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 43%;"
           />
         </div>
@@ -701,7 +701,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://jumbo-counselor.net"
@@ -717,7 +717,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             3,831
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 43%;"
           />
         </div>
@@ -725,7 +725,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://lanky-gratitude.net"
@@ -741,7 +741,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             5,994
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 66%;"
           />
         </div>
@@ -749,7 +749,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://quaint-boycott.name"
@@ -765,7 +765,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             3,288
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 37%;"
           />
         </div>
@@ -773,7 +773,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://medical-detail.com"
@@ -789,7 +789,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             7,669
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 85%;"
           />
         </div>
@@ -797,7 +797,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://oily-cloister.name"
@@ -813,7 +813,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             6,760
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 75%;"
           />
         </div>
@@ -821,7 +821,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://long-oeuvre.name"
@@ -837,7 +837,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
             4,298
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 48%;"
           />
         </div>
@@ -872,13 +872,13 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
       class="top-downloads__bar-chart"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       >
         <div
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -925,7 +925,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             8,270
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 84%;"
           />
         </div>
@@ -933,7 +933,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -980,7 +980,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             635
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 7%;"
           />
         </div>
@@ -988,7 +988,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1035,7 +1035,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             2,948
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 31%;"
           />
         </div>
@@ -1043,7 +1043,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1090,7 +1090,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             7,945
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 81%;"
           />
         </div>
@@ -1098,7 +1098,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1145,7 +1145,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             4,884
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 50%;"
           />
         </div>
@@ -1153,7 +1153,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1200,7 +1200,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             2,680
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 28%;"
           />
         </div>
@@ -1208,7 +1208,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1255,7 +1255,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             9,104
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 92%;"
           />
         </div>
@@ -1263,7 +1263,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1310,7 +1310,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             2,878
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 30%;"
           />
         </div>
@@ -1318,7 +1318,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1365,7 +1365,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             5,638
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 58%;"
           />
         </div>
@@ -1373,7 +1373,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1420,7 +1420,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             1,262
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 14%;"
           />
         </div>
@@ -1428,7 +1428,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1475,7 +1475,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             5,981
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 61%;"
           />
         </div>
@@ -1483,7 +1483,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1530,7 +1530,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             3,477
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 36%;"
           />
         </div>
@@ -1538,7 +1538,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1585,7 +1585,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             4,499
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 46%;"
           />
         </div>
@@ -1593,7 +1593,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1640,7 +1640,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             9,852
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 100%;"
           />
         </div>
@@ -1648,7 +1648,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1695,7 +1695,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             6,688
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 68%;"
           />
         </div>
@@ -1703,7 +1703,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1750,7 +1750,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             9,811
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 100%;"
           />
         </div>
@@ -1758,7 +1758,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1805,7 +1805,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             4,782
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 49%;"
           />
         </div>
@@ -1813,7 +1813,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1860,7 +1860,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             9,186
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 93%;"
           />
         </div>
@@ -1868,7 +1868,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1915,7 +1915,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             367
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 5%;"
           />
         </div>
@@ -1923,7 +1923,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -1970,7 +1970,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
             5,399
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 55%;"
           />
         </div>
@@ -2022,13 +2022,13 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
       class="top-downloads__bar-chart"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       >
         <div
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2075,7 +2075,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             8,997
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 98%;"
           />
         </div>
@@ -2083,7 +2083,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2130,7 +2130,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             9,071
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 98%;"
           />
         </div>
@@ -2138,7 +2138,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2185,7 +2185,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             8,505
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 92%;"
           />
         </div>
@@ -2193,7 +2193,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2240,7 +2240,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             7,699
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 84%;"
           />
         </div>
@@ -2248,7 +2248,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2295,7 +2295,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             1,142
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 13%;"
           />
         </div>
@@ -2303,7 +2303,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2350,7 +2350,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             5,030
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 55%;"
           />
         </div>
@@ -2358,7 +2358,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2405,7 +2405,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             6,966
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 76%;"
           />
         </div>
@@ -2413,7 +2413,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2460,7 +2460,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             5,602
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 61%;"
           />
         </div>
@@ -2468,7 +2468,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2515,7 +2515,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             9,217
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 100%;"
           />
         </div>
@@ -2523,7 +2523,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2570,7 +2570,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             4,865
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 53%;"
           />
         </div>
@@ -2578,7 +2578,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2625,7 +2625,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             2,121
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 24%;"
           />
         </div>
@@ -2633,7 +2633,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2680,7 +2680,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             1,804
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 20%;"
           />
         </div>
@@ -2688,7 +2688,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2735,7 +2735,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             7,889
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 86%;"
           />
         </div>
@@ -2743,7 +2743,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2790,7 +2790,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             3,102
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 34%;"
           />
         </div>
@@ -2798,7 +2798,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2845,7 +2845,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             1,796
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 20%;"
           />
         </div>
@@ -2853,7 +2853,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2900,7 +2900,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             108
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 2%;"
           />
         </div>
@@ -2908,7 +2908,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -2955,7 +2955,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             2,046
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 23%;"
           />
         </div>
@@ -2963,7 +2963,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -3010,7 +3010,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             927
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 11%;"
           />
         </div>
@@ -3018,7 +3018,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -3065,7 +3065,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             1,426
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 16%;"
           />
         </div>
@@ -3073,7 +3073,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item"
         >
           <div
-            class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
           >
             <span
               class="name"
@@ -3120,7 +3120,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
             3,912
           </div>
           <div
-            class="chart__bar-chart__item__bar"
+            class="chart__bar-chart__item__bar bg-light-blue"
             style="width: 43%;"
           />
         </div>
@@ -3172,7 +3172,7 @@ exports[`TopDownloadsAndVideoPlays when data is not loaded renders a component i
       class="top-downloads__bar-chart"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
   </section>
@@ -3221,7 +3221,7 @@ exports[`TopDownloadsAndVideoPlays when data loading has an error renders a comp
       class="top-downloads__bar-chart"
     >
       <div
-        class="data chart__bar-chart text--capitalize"
+        class="data chart__bar-chart text--capitalize margin-top-4"
       />
     </figure>
   </section>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap
index 152897e6..4db42d29 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap
@@ -15,13 +15,13 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
     id="chart_top-languages"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     >
       <div
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           English
         </div>
@@ -31,7 +31,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
           91.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 91%;"
         />
       </div>
@@ -39,7 +39,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Spanish
         </div>
@@ -49,7 +49,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
           5.3%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 5%;"
         />
       </div>
@@ -57,7 +57,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Chinese
         </div>
@@ -67,7 +67,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
           0.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 1%;"
         />
       </div>
@@ -75,7 +75,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           French
         </div>
@@ -85,7 +85,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
           0.5%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -93,7 +93,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Japanese
         </div>
@@ -103,7 +103,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -111,7 +111,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Portuguese
         </div>
@@ -121,7 +121,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
           0.3%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -129,7 +129,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           German
         </div>
@@ -139,7 +139,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
           0.3%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -147,7 +147,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Italian
         </div>
@@ -157,7 +157,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -165,7 +165,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Korean
         </div>
@@ -175,7 +175,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -183,7 +183,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           Russian
         </div>
@@ -193,7 +193,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 0%;"
         />
       </div>
@@ -217,7 +217,7 @@ exports[`TopLanguagesHistorical when data is not loaded renders a component in l
     id="chart_top-languages"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
@@ -238,7 +238,7 @@ exports[`TopLanguagesHistorical when data loading has an error renders a compone
     id="chart_top-languages"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopPagesHistorical.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopPagesHistorical.spec.js.snap
index dac8e57f..faed06da 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopPagesHistorical.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopPagesHistorical.spec.js.snap
@@ -6,13 +6,13 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
     data-source="http://www.example.com/data//foobar.json"
   >
     <div
-      class="data chart__bar-chart text--lowercase"
+      class="data chart__bar-chart text--lowercase margin-top-4"
     >
       <div
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://infinite-flip-flops.com"
@@ -28,7 +28,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
           209,141
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 32%;"
         />
       </div>
@@ -36,7 +36,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://defenseless-manicure.com"
@@ -52,7 +52,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
           668,921
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 100%;"
         />
       </div>
@@ -60,7 +60,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://crooked-miter.net"
@@ -76,7 +76,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
           466,610
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 70%;"
         />
       </div>
@@ -84,7 +84,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://natural-fairy.net"
@@ -100,7 +100,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
           154,583
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 24%;"
         />
       </div>
@@ -108,7 +108,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://stylish-photography.net"
@@ -124,7 +124,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
           588,116
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 88%;"
         />
       </div>
@@ -132,7 +132,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://formal-popularity.org"
@@ -148,7 +148,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
           48,597
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 8%;"
         />
       </div>
@@ -156,7 +156,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://majestic-anticipation.info"
@@ -172,7 +172,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
           194,286
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 30%;"
         />
       </div>
@@ -180,7 +180,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://costly-fortnight.name"
@@ -196,7 +196,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
           376,165
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 57%;"
         />
       </div>
@@ -204,7 +204,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://posh-retention.org"
@@ -220,7 +220,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
           460,101
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 69%;"
         />
       </div>
@@ -228,7 +228,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://educated-tam-o-shanter.com"
@@ -244,7 +244,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
           473,734
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 71%;"
         />
       </div>
@@ -259,7 +259,7 @@ exports[`TopPagesHistorical when data is not loaded renders a component in loadi
     data-source="http://www.example.com/data//foobar.json"
   >
     <div
-      class="data chart__bar-chart text--lowercase"
+      class="data chart__bar-chart text--lowercase margin-top-4"
     />
   </figure>
 </DocumentFragment>
@@ -271,7 +271,7 @@ exports[`TopPagesHistorical when data loading has an error renders a component i
     data-source="http://www.example.com/data//foobar.json"
   >
     <div
-      class="data chart__bar-chart text--lowercase"
+      class="data chart__bar-chart text--lowercase margin-top-4"
     />
   </figure>
 </DocumentFragment>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopPagesRealtime.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopPagesRealtime.spec.js.snap
index 5d9a0ee1..fc1c6761 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopPagesRealtime.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopPagesRealtime.spec.js.snap
@@ -4,13 +4,13 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
 <DocumentFragment>
   <figure>
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     >
       <div
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           deploy virtual synergies
         </div>
@@ -20,7 +20,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
           20,914
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 32%;"
         />
       </div>
@@ -28,7 +28,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           leverage back-end paradigms
         </div>
@@ -38,7 +38,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
           66,892
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 100%;"
         />
       </div>
@@ -46,7 +46,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           orchestrate efficient applications
         </div>
@@ -56,7 +56,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
           46,661
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 70%;"
         />
       </div>
@@ -64,7 +64,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           mesh frictionless networks
         </div>
@@ -74,7 +74,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
           15,458
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 24%;"
         />
       </div>
@@ -82,7 +82,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           engineer world-class networks
         </div>
@@ -92,7 +92,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
           58,812
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 88%;"
         />
       </div>
@@ -100,7 +100,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           envisioneer cross-platform web services
         </div>
@@ -110,7 +110,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
           4,859
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 8%;"
         />
       </div>
@@ -118,7 +118,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           syndicate vertical technologies
         </div>
@@ -128,7 +128,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
           19,428
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 30%;"
         />
       </div>
@@ -136,7 +136,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           enable viral interfaces
         </div>
@@ -146,7 +146,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
           37,616
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 57%;"
         />
       </div>
@@ -154,7 +154,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           expedite out-of-the-box blockchains
         </div>
@@ -164,7 +164,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
           46,010
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 69%;"
         />
       </div>
@@ -172,7 +172,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           architect visionary paradigms
         </div>
@@ -182,7 +182,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
           47,373
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 71%;"
         />
       </div>
@@ -195,7 +195,7 @@ exports[`TopPagesRealtime when data is not loaded renders a component in loading
 <DocumentFragment>
   <figure>
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
@@ -205,7 +205,7 @@ exports[`TopPagesRealtime when data loading has an error renders a component in
 <DocumentFragment>
   <figure>
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     />
   </figure>
 </DocumentFragment>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopVideoPlays.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopVideoPlays.spec.js.snap
index 33ec865f..a693b2b4 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopVideoPlays.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopVideoPlays.spec.js.snap
@@ -6,13 +6,13 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
     class="top-video-plays__bar-chart"
   >
     <div
-      class="data chart__bar-chart text--capitalize"
+      class="data chart__bar-chart text--capitalize margin-top-4"
     >
       <div
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=ijkkPoXQukY"
@@ -28,7 +28,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
           22,112
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 100%;"
         />
       </div>
@@ -36,7 +36,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=6cUe4oMk69E"
@@ -52,7 +52,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
           17,997
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 82%;"
         />
       </div>
@@ -60,7 +60,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=0akd7xj6wec"
@@ -76,7 +76,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
           7,568
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 35%;"
         />
       </div>
@@ -84,7 +84,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=FsQHz2ZdX6E"
@@ -100,7 +100,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
           3,485
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 17%;"
         />
       </div>
@@ -108,7 +108,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=iQrP4n-VeFg"
@@ -124,7 +124,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
           1,808
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 9%;"
         />
       </div>
@@ -132,7 +132,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=j3mk6tUokm4"
@@ -148,7 +148,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
           877
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 5%;"
         />
       </div>
@@ -156,7 +156,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=N33FJaziUgY"
@@ -172,7 +172,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
           859
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 5%;"
         />
       </div>
@@ -180,7 +180,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?list=TLGG8tIphgpDAHkyNTA2MjAyNA&v=6cUe4oMk69E"
@@ -196,7 +196,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
           637
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 4%;"
         />
       </div>
@@ -204,7 +204,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=hjJIyZKbHqc"
@@ -220,7 +220,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
           390
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 3%;"
         />
       </div>
@@ -228,7 +228,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item"
       >
         <div
-          class="chart__bar-chart__item__label text--overflow-ellipsis text--wrap"
+          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?list=TLGG8tIphgpDAHkyMzA2MjAyNA&v=6cUe4oMk69E"
@@ -244,7 +244,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
           343
         </div>
         <div
-          class="chart__bar-chart__item__bar"
+          class="chart__bar-chart__item__bar bg-light-blue"
           style="width: 3%;"
         />
       </div>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TrafficSources.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TrafficSources.spec.js.snap
index 60e441e2..1efb5c02 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TrafficSources.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TrafficSources.spec.js.snap
@@ -25,7 +25,7 @@ exports[`TrafficSources renders 1`] = `
           id="chart_session_default_channel_group"
         >
           <div
-            class="data chart__bar-chart"
+            class="data chart__bar-chart margin-top-4"
           />
         </figure>
       </div>
@@ -50,7 +50,7 @@ exports[`TrafficSources renders 1`] = `
           id="chart_session_source_medium"
         >
           <div
-            class="data chart__bar-chart"
+            class="data chart__bar-chart margin-top-4"
           />
         </figure>
       </div>
diff --git a/js/lib/chart_helpers/barchart.js b/js/lib/chart_helpers/barchart.js
index c0731d7b..e9280652 100644
--- a/js/lib/chart_helpers/barchart.js
+++ b/js/lib/chart_helpers/barchart.js
@@ -40,12 +40,12 @@ export default function barChart() {
       .append("div")
       .attr(
         "class",
-        "chart__bar-chart__item__label text--overflow-ellipsis text--wrap",
+        "chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8",
       );
     enter.append("div").attr("class", "chart__bar-chart__item__value");
     enter
       .append("div")
-      .attr("class", "chart__bar-chart__item__bar")
+      .attr("class", "chart__bar-chart__item__bar bg-light-blue")
       .style("width", "0%");
 
     const componentScale = scale
diff --git a/sass/components/_agency-select.scss b/sass/components/_agency-select.scss
index d1b449be..98a9146c 100644
--- a/sass/components/_agency-select.scss
+++ b/sass/components/_agency-select.scss
@@ -1,13 +1,14 @@
 @use "uswds-core" as *;
+@use "colors";
 
 .analytics-select {
   &--main {
-    color: color("gray-1");
+    color: colors.$white;
 
     select {
-      background-color: color("blue-50");
-      border: units(1px) solid color("gray-1");
-      color: color("gray-1");
+      background-color: colors.$light-blue-two;
+      border: units(1px) solid colors.$white;
+      color: colors.$white;
 
       // This media size is where the header items become spaced out horizontally.
       @include at-media("tablet") {
@@ -17,11 +18,11 @@
   }
 
   &--secondary {
-    color: color("gray-cool-70");
+    color: colors.$dark-gray;
 
     select.usa-select {
       background-image: url("../css/img/arrow-down-black.svg");
-      border: units(1px) solid color("blue-80v");
+      border: units(1px) solid colors.$dark-blue;
 
       @include at-media("desktop-lg") {
         order: 2;
@@ -39,10 +40,7 @@
   }
 
   label {
-    margin-bottom: units(1);
-    margin-top: units(1);
     max-width: none;
-    text-align: center;
     vertical-align: middle;
     width: 100%;
 
diff --git a/sass/elements/_chart.scss b/sass/elements/_chart.scss
index 868884b9..777ef562 100644
--- a/sass/elements/_chart.scss
+++ b/sass/elements/_chart.scss
@@ -11,7 +11,6 @@
 }
 
 .chart__bar-chart {
-  margin-top: units(4);
   position: relative;
 }
 
@@ -25,7 +24,6 @@
 }
 
 .chart__bar-chart__item__bar {
-  background: colors.$light-blue;
   height: units(1.5);
   min-width: 1px;
   position: relative;
@@ -46,9 +44,7 @@
 }
 
 .chart__bar-chart__item__label {
-  color: colors.$dark-gray;
   height: 2.2rem;
-  margin-right: units(8);
 
   a {
     text-decoration: none;
diff --git a/sass/elements/_color_classes.scss b/sass/elements/_color_classes.scss
new file mode 100644
index 00000000..80fa7490
--- /dev/null
+++ b/sass/elements/_color_classes.scss
@@ -0,0 +1,9 @@
+@use "colors";
+
+.bg-light-blue {
+  background: colors.$light-blue;
+}
+
+.dark-grey {
+  color: colors.$dark-gray;
+}
diff --git a/sass/elements/_index.scss b/sass/elements/_index.scss
index 5ae42751..47906939 100644
--- a/sass/elements/_index.scss
+++ b/sass/elements/_index.scss
@@ -1,5 +1,6 @@
 @forward "grid_helpers";
 @forward "chart";
+@forward "color_classes";
 @forward "common";
 @forward "section";
 @forward "text";
diff --git a/sass/elements/_text.scss b/sass/elements/_text.scss
index 190ea510..4b463d3e 100644
--- a/sass/elements/_text.scss
+++ b/sass/elements/_text.scss
@@ -51,7 +51,3 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.text--wrap {
-  overflow-wrap: break-word;
-}
diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss
index d1ee8f37..ecd11177 100644
--- a/sass/layout/_header.scss
+++ b/sass/layout/_header.scss
@@ -1,4 +1,5 @@
 @use "uswds-core" as *;
+@use "colors";
 
 /*
   Top navigation header
@@ -18,12 +19,11 @@
 
 header#analytics-header {
   align-items: center;
-  background: color("blue-80v");
-  border-bottom: units(1) solid color("blue-50v");
-  color: color("gray-1");
+  background: colors.$dark-blue;
+  border-bottom: units(1) solid colors.$light-blue;
+  color: colors.$white;
   flex-direction: column;
   justify-content: center;
-  padding: units(3);
 
   @include at-media("tablet") {
     flex-direction: row;
@@ -66,17 +66,17 @@ header#analytics-header {
   }
 
   a {
-    color: color("gray-1");
+    color: colors.$white;
     font-weight: font-weight(300);
     text-decoration: none;
 
     &:hover {
-      color: color("gray-1");
+      color: colors.$white;
       text-decoration: underline;
     }
 
     &:visited {
-      color: color("gray-1");
+      color: colors.$white;
     }
   }
 
diff --git a/sass/pages/root/_secondary-data.scss b/sass/pages/root/_secondary-data.scss
index fe42bacc..116b3ced 100644
--- a/sass/pages/root/_secondary-data.scss
+++ b/sass/pages/root/_secondary-data.scss
@@ -78,10 +78,6 @@
     .chart__bar-chart__item__label {
       color: colors.$dark-gray;
       height: 2.2rem;
-      margin-right: units(8);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
     }
 
     .chart__bar-chart__item__value {
@@ -173,11 +169,6 @@
       color: colors.$dark-gray;
       height: auto;
       line-height: normal;
-      margin-right: units(8);
-      // Override default chart label behavior to stop overflow with ellipsis so
-      // the full video title is shown with wrap
-      overflow: auto;
-      white-space: normal;
     }
 
     .chart__bar-chart__item__value {