diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index d18ca2199e33..798fb2cf7e96 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -111,6 +111,8 @@ <h3>Get Started</h3>
             </div>
         </div>
 
+        <p class="page-footer__fine-print">The Expensify Visa® Commercial Card is issued by The Bancorp Bank, N.A., Member FDIC, pursuant to a license from Visa U.S.A. Inc. and may not be used at all merchants that accept Visa cards. Apple® and the Apple logo® are trademarks of Apple Inc., registered in the U.S. and other countries. App Store is a service mark of Apple Inc. Google Play and the Google Play logo are trademarks of Google LLC.</p>
+
         <div class="page-footer__logo">
             <img src="/assets/images/expensify-footer-logo.svg" alt="Expensify" />
         </div>
diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss
index 5556c43d87f6..f0c89d31c580 100644
--- a/docs/_sass/_colors.scss
+++ b/docs/_sass/_colors.scss
@@ -1,14 +1,36 @@
-$color-green400: #03D47C;
-$color-green-icons: #8B9C8F;
-$color-green-borders: #1A3D32;
-$color-button-background: #1A3D32;
-$color-button-hovered: #2A604F;
-$color-green-highlightBG: #072419;
-$color-green-highlightBG-hover: #06231c;
-$color-green-appBG: #061B09;
-$color-green-hover: #00a862;
-$color-light-gray-green: #AFBBB0;
-$color-blue300: #5AB0FF;
+// Product Color Spectrum
+$color-product-dark-100: #061B09;
+$color-product-dark-200: #072419;
+$color-product-dark-300: #0A2E25;
+$color-product-dark-400: #1A3D32;
+$color-product-dark-500: #224F41;
+$color-product-dark-600: #2A604F;
+$color-product-dark-700: #8B9C8F;
+$color-product-dark-800: #AFBBB0;
+$color-product-dark-900: #E7ECE9;
+
+// Colors for Links and Success
 $color-blue200: #B0D9FF;
-$color-white: #E7ECE9;
-$color-gray-label: #afbbb0;
+$color-blue300: #5AB0FF;
+$color-green400: #03D47C;
+$color-green500: #00a862;
+
+// Overlay BG color
+$color-overlay-background: rgba(26, 61, 50, 0.72);
+
+// UI Colors
+$color-text: $color-product-dark-900;
+$color-text-supporting: $color-product-dark-800;
+$color-icons: $color-product-dark-700;
+$color-borders: $color-product-dark-400;
+$color-highlightBG: $color-product-dark-200;
+$color-row-hover: $color-product-dark-300;
+$color-appBG: $color-product-dark-100;
+$color-success: $color-green400;
+$color-accent : $color-green400;
+$color-link: $color-blue300;
+$color-link-hovered: $color-blue200;
+$color-button-background: $color-product-dark-400;
+$color-button-background-hover: $color-product-dark-500;
+$color-button-success-background: $color-green400;
+$color-button-success-background-hover: $color-green500;
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 7a0804b0f962..eaaa1c63badb 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -3,19 +3,6 @@
 @import 'fonts';
 @import 'search-bar';
 
-$color-appBG: $color-green-appBG;
-$color-highlightBG: $color-green-highlightBG;
-$color-accent : $color-green400;
-$color-borders: $color-green-borders;
-$color-icons: $color-green-icons;
-$color-text: $color-white;
-$color-link: $color-blue300;
-$color-link-hovered: $color-blue200;
-$color-success: $color-green400;
-$color-text-supporting: $color-light-gray-green;
-$color-green-hover: $color-green-hover;
-$color-gray-label: $color-gray-label;
-
 * {
     margin: 0;
     padding: 0;
@@ -78,6 +65,7 @@ body {
     height: 100%;
     min-height: 100%;
     background: $color-appBG;
+    color: $color-text-supporting;
 }
 
 hr {
@@ -148,7 +136,7 @@ textarea {
     font-weight: 400;
     font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif;
     font-size: 16px;
-    color: $color-text;
+    color: $color-text-supporting;
 }
 
 button {
@@ -159,7 +147,7 @@ button {
     font-weight: bold;
 
     &.success {
-        background-color: $color-success;
+        background-color: $color-button-success-background;
         color: $color-text;
         width: 100%;
         border-radius: 100px;
@@ -167,7 +155,7 @@ button {
         padding-right: 20px;
 
         &:hover {
-            background-color: desaturate($color-success, 15%);
+            background-color: $color-button-success-background-hover;
             cursor: pointer;
         }
 
@@ -262,6 +250,7 @@ button {
 
     .lhn-header {
         padding: 24px;
+
         @include breakpoint($breakpoint-tablet) {
             padding: 44px;
         }
@@ -269,6 +258,7 @@ button {
         #header-button {
             display: block;
             padding-right: 24px;
+
             @include breakpoint($breakpoint-tablet) {
                 display: none;
             }
@@ -282,7 +272,7 @@ button {
             margin-right: auto;
 
             @include breakpoint($breakpoint-desktop) {
-                width: 210px;
+                width: 180px;
                 align-content: normal;
                 display: flex;
                 margin-left: 0;
@@ -372,7 +362,7 @@ button {
             // Box shadow is used here because border-radius and border-collapse don't work together. It leads to double borders.
             // https://stackoverflow.com/questions/628301/the-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i-use
             border-style: hidden;
-            box-shadow: 0 0 0 1px $color-green-borders;
+            box-shadow: 0 0 0 1px $color-borders;
         }
 
         th:first-child {
@@ -394,12 +384,12 @@ button {
         th,
         td {
             padding: 6px 13px;
-            border: 1px solid $color-green-borders;
+            border: 1px solid $color-borders;
         }
 
         thead tr th {
             font-weight: bold;
-            background-color: $color-green-highlightBG;
+            background-color: $color-highlightBG;
         }
 
         .img-wrap {
@@ -457,11 +447,11 @@ button {
 
 .link {
     display: inline;
-    color: $color-link;
+    color: $color-text-supporting;
     cursor: pointer;
 
     &:hover {
-        color: $color-link-hovered;
+        color: $color-link;
     }
 }
 
@@ -530,7 +520,7 @@ button {
     background-color: $color-highlightBG;
 
     &:hover {
-        background-color: darken($color-highlightBG, 1%);
+        background-color: $color-row-hover;
     }
 
     .row {
@@ -629,13 +619,14 @@ button {
     }
 
     p.description {
+        color: $color-text-supporting;
         padding: 20px 0 20px 0;
     }
 
     p.url {
         padding: 0;
         font-size: 0.8em;
-        color: $color-gray-label;
+        color: $color-text-supporting;
     }
 }
 
@@ -739,7 +730,7 @@ button {
 
 .get-help {
     flex-wrap: wrap;
-    margin-top: auto;
+    margin-top: 40px;
 }
 
 .floating-concierge-button {
@@ -773,9 +764,12 @@ button {
 
     h3 {
         color: $color-success;
+        font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif;
         font-size: 17px;
-        font-weight: 700;
+        font-weight: 500;
+        padding: 0;
         margin-bottom: 16px;
+        margin-top: 0;
     }
 
     ul {
@@ -787,13 +781,13 @@ button {
             margin: 0 0 8px;
 
             a {
-                color: $color-text;
+                color: $color-text-supporting;
                 display: block;
                 padding: 4px 0;
                 word-break: break-word;
 
                 &:hover {
-                    color: $color-success;
+                    color: $color-link;
                 }
             }
         }
@@ -803,11 +797,11 @@ button {
         padding-bottom: 20px;
 
         a {
-            color: $color-text;
+            color: $color-text-supporting;
             display: inline-block;
 
             &:hover {
-                color: $color-success;
+                color: $color-link;
             }
         }
     }
diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss
index c2185ef8f36a..f414d25fc266 100644
--- a/docs/_sass/_search-bar.scss
+++ b/docs/_sass/_search-bar.scss
@@ -2,20 +2,6 @@
 @import 'colors';
 @import 'fonts';
 
-$color-appBG: $color-green-appBG;
-$color-highlightBG: $color-green-highlightBG;
-$color-highlightBG-hover: $color-green-highlightBG-hover;
-$color-accent : $color-green400;
-$color-borders: $color-green-borders;
-$color-icons: $color-green-icons;
-$color-text: $color-white;
-$color-link: $color-blue300;
-$color-link-hovered: $color-blue200;
-$color-success: $color-green400;
-$color-text-supporting: $color-light-gray-green;
-$color-green-hover: $color-green-hover;
-$color-gray-label: $color-gray-label;
-
 .search-icon {
     margin: auto 0px;
 }
@@ -81,7 +67,7 @@ $color-gray-label: $color-gray-label;
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: $color-overlay-background;
     z-index: 1;
 }
 
@@ -158,7 +144,7 @@ label.search-label {
     transform: translateY(-50%);
     left: 20px;
     pointer-events: none;
-    color: $color-gray-label;
+    color: $color-text-supporting;
     transform-origin: left top;
     user-select: none;
     transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), top 500ms;
@@ -194,14 +180,14 @@ label.search-label {
     margin-left: 15px;
     margin-right: 20px;
     border-radius: 25px;
-    background-color: $color-green400;
+    background-color: $color-button-success-background;
     cursor: pointer;
     width: 40px;
     height: 40px;
 }
 
 .gsc-search-button.gsc-search-button-v2:hover {
-    background-color: $color-green-hover;
+    background-color: $color-button-success-background-hover;
 }
 
 .gsc-search-button.gsc-search-button-v2 svg {
@@ -227,7 +213,7 @@ label.search-label {
 
 /* Change Font result Paragraph color */
 .gsc-results .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType {
-    color: $color-text;
+    color: $color-text-supporting;
 }
 
 
@@ -278,7 +264,7 @@ label.search-label {
     color: $color-text;
 
     &:hover {
-        background-color: $color-button-hovered;
+        background-color: $color-button-background-hover;
         text-decoration: none;
     }
 }