diff --git a/src/App.vue b/src/App.vue
index ead332b69cd5fa2fcc3c8c81bc7842824f5a3f3f..de9cb4eb7919f31f4a9544b31fe58b8a5f1cfd89 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -137,7 +137,7 @@ h3{
   font-weight: 400;
   color: $textcolor;
   @media screen and (max-width: 600px) {
-      font-size: 3.2rem;
+      font-size: 2.5rem;
   }  
 }
 h4{
diff --git a/src/assets/base.css b/src/assets/base.css
index 4f652403078d7dd204a1d6e163202d4b6f4fc40b..cf2b01a5797c58661c96ea4cc27ea6db4fe2638b 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -4,7 +4,7 @@
   --white: #ffffff;
   --white-soft: #F0F0F0;
 
-  --black-soft: #151515;
+  --black-soft: #1b1b1b;
   --dodger-blue: #1e90ff;
 
   font-size: 62.5%;
diff --git a/src/assets/common.css b/src/assets/common.css
index 3d7799da77cb90e4fe191dee202d9a618ac57a54..707a88d7686a283432b72f64dbc14b07405a8fda 100644
--- a/src/assets/common.css
+++ b/src/assets/common.css
@@ -51,7 +51,7 @@ hr {
 
 /* header (only) nav */
 .header-nav {
-	background: #00264c;
+	background: #1b1b1b;
 }
 
 .logo-header img {
@@ -116,7 +116,7 @@ input,button{font-family:inherit;font-size:inherit;line-height:inherit}
    content: none;
 }
 footer.footer {
-	background: #00264c;
+	background: #1b1b1b;
 	padding-bottom: 0px;
 	position: relative;
 	width: 100%;
diff --git a/src/assets/images/full-color_no-circle_strong-fade.png b/src/assets/images/full-color_no-circle_strong-fade.png
new file mode 100644
index 0000000000000000000000000000000000000000..47fabef2a8af4aa85af91a17713841333493b5c0
Binary files /dev/null and b/src/assets/images/full-color_no-circle_strong-fade.png differ
diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue
index 6110669f9fae4be6729d68d122ded1c092f0bb96..9bb95a87fe98a3c85af6918f9c564051c23fa2cf 100644
--- a/src/components/VizTitle.vue
+++ b/src/components/VizTitle.vue
@@ -5,7 +5,7 @@
         ref="heroImage"
         id="title-image"
         :class="{ mobile: mobileView }"
-        src="@/assets/images/hero_img_cutout_less-stylized_feather.png"
+        src="@/assets/images/full-color_no-circle_strong-fade.png"
         alt="Social vulnerability and water insecurity"
         @load="updateSvgDimensions"
       />
@@ -13,7 +13,7 @@
         ref="bwHeroImage"
         id="bw-title-image"
         :class="{ mobile: mobileView }"
-        src="@/assets/images/hero_img_cutout_less-stylized_feather.png"
+        src="@/assets/images/full-color_no-circle_strong-fade.png"
         alt="Social vulnerability and water insecurity (grayscale)"
       />
       <!-- Using svg masks with a circle shape to reveal color image where circles are on top of bw -->
@@ -118,13 +118,13 @@ watch(mobileView, () => {
 #text-container {
   width: 100%;
   background: rgba(0, 0, 0, 0.95); 
-  color: black; 
+  color: #1b1b1b; 
   padding: 20px; 
   box-sizing: border-box;
 }
 #image-container {
-  color: black; 
-  background: rgba(0, 0, 0, 0.95);
+  color: #1b1b1b; 
+  background: #1b1b1b;
 }
 
 h1 {