diff --git a/jsapp/js/account/accountFieldsEditor.module.scss b/jsapp/js/account/accountFieldsEditor.module.scss
index d7fc67d957..0e46599c08 100644
--- a/jsapp/js/account/accountFieldsEditor.module.scss
+++ b/jsapp/js/account/accountFieldsEditor.module.scss
@@ -24,7 +24,7 @@
   .checkboxLabel {
     margin-top: sizes.$x6;
     margin-bottom: sizes.$x6;
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 
   :global {
@@ -63,7 +63,7 @@
 .socialLabel,
 .checkboxLabel {
   width: 100%;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
   font-size: sizes.$x12;
   line-height: textBox.$label-leading;
   margin-bottom: textBox.$label-margin;
diff --git a/jsapp/js/account/accountSettings.scss b/jsapp/js/account/accountSettings.scss
index 4a63d9c828..dc5306a24b 100644
--- a/jsapp/js/account/accountSettings.scss
+++ b/jsapp/js/account/accountSettings.scss
@@ -13,7 +13,7 @@
   h4 {
     margin: 0;
     font-weight: 400;
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 
   .kobo-select {
diff --git a/jsapp/js/account/add-ons/addOnList.module.scss b/jsapp/js/account/add-ons/addOnList.module.scss
index d7396b8f29..0844054a66 100644
--- a/jsapp/js/account/add-ons/addOnList.module.scss
+++ b/jsapp/js/account/add-ons/addOnList.module.scss
@@ -41,7 +41,7 @@
 }
 
 .price {
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 }
 
 .productName {
diff --git a/jsapp/js/account/plans/confirmChangeModal.component.tsx b/jsapp/js/account/plans/confirmChangeModal.component.tsx
index cfcabc8c2f..1b0b12213a 100644
--- a/jsapp/js/account/plans/confirmChangeModal.component.tsx
+++ b/jsapp/js/account/plans/confirmChangeModal.component.tsx
@@ -202,7 +202,7 @@ const ConfirmChangeModal = ({
           label={t('Submit')}
         />
         <BillingButton
-          color='dark-red'
+          color='red'
           isDisabled={isLoading}
           onClick={onClickCancel}
           label={t('Cancel')}
diff --git a/jsapp/js/account/plans/plan.module.scss b/jsapp/js/account/plans/plan.module.scss
index 0259b714e2..b58acf0c87 100644
--- a/jsapp/js/account/plans/plan.module.scss
+++ b/jsapp/js/account/plans/plan.module.scss
@@ -114,7 +114,7 @@ $plan-badge-height: 38px;
 
 .priceName,
 .enterpriseTitle {
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-weight: 600;
   font-size: sizes.$x24;
   line-height: sizes.$x32;
@@ -133,7 +133,7 @@ $plan-badge-height: 38px;
 
 .planContainer {
   border-radius: sizes.$x6;
-  border: colors.$kobo-gray-85 solid sizes.$x1;
+  border: colors.$kobo-gray-400 solid sizes.$x1;
   padding: sizes.$x24;
   width: $plans-page-card-width;
   display: flex;
@@ -150,7 +150,7 @@ $plan-badge-height: 38px;
 }
 
 .planContainer :global hr {
-  border-bottom: sizes.$x1 solid colors.$kobo-gray-96;
+  border-bottom: sizes.$x1 solid colors.$kobo-gray-200;
   border-top: none;
   margin: sizes.$x24 auto;
   width: 100%;
@@ -202,7 +202,7 @@ a.enterpriseLink {
 }
 
 .listTitle {
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-size: sizes.$x14;
   font-weight: 600;
   padding: 0;
@@ -250,7 +250,7 @@ a.enterpriseLink {
   bottom: sizes.$x20;
   right: sizes.$x20;
   border-radius: sizes.$x6;
-  background-color: colors.$kobo-gray-40;
+  background-color: colors.$kobo-gray-700;
   width: sizes.$x50;
   height: sizes.$x40;
 	color: colors.$kobo-white;
diff --git a/jsapp/js/account/plans/planContainer.component.tsx b/jsapp/js/account/plans/planContainer.component.tsx
index dd51ae5f9f..a9656fbe12 100644
--- a/jsapp/js/account/plans/planContainer.component.tsx
+++ b/jsapp/js/account/plans/planContainer.component.tsx
@@ -148,7 +148,7 @@ export const PlanContainer = ({
                   color={item.icon === 'positive_pro' ? 'teal' : 'storm'}
                 />
               ) : (
-                <Icon name='close' size='m' color='red' />
+                <Icon name='close' size='m' color='mid-red' />
               )}
             </div>
             {item.label}
diff --git a/jsapp/js/account/security/apiToken/apiTokenSection.module.scss b/jsapp/js/account/security/apiToken/apiTokenSection.module.scss
index b2892c7904..130237141b 100644
--- a/jsapp/js/account/security/apiToken/apiTokenSection.module.scss
+++ b/jsapp/js/account/security/apiToken/apiTokenSection.module.scss
@@ -10,7 +10,7 @@
   align-items: baseline;
   column-gap: sizes.$x16;
   border-top: sizes.$x1 solid;
-  border-color: colors.$kobo-gray-92;
+  border-color: colors.$kobo-gray-300;
 }
 
 .titleSection {
@@ -23,7 +23,7 @@
 
 .title {
   margin: 0;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-weight: 600;
   line-height: 1.6;
 }
diff --git a/jsapp/js/account/security/email/emailSection.component.tsx b/jsapp/js/account/security/email/emailSection.component.tsx
index 8c2f77cbce..7dc80ba3f9 100644
--- a/jsapp/js/account/security/email/emailSection.component.tsx
+++ b/jsapp/js/account/security/email/emailSection.component.tsx
@@ -150,7 +150,7 @@ export default function EmailSection() {
                 <Button
                   label='Remove'
                   size='m'
-                  color='dark-red'
+                  color='red'
                   type='frame'
                   onClick={deleteNewUserEmail}
                 />
diff --git a/jsapp/js/account/security/email/emailSection.module.scss b/jsapp/js/account/security/email/emailSection.module.scss
index 032303af50..23a2c7e377 100644
--- a/jsapp/js/account/security/email/emailSection.module.scss
+++ b/jsapp/js/account/security/email/emailSection.module.scss
@@ -10,7 +10,7 @@
   align-items: baseline;
   column-gap: sizes.$x16;
   border-top: sizes.$x1 solid;
-  border-color: colors.$kobo-gray-92;
+  border-color: colors.$kobo-gray-300;
 }
 
 .titleSection {
@@ -23,7 +23,7 @@
 
 .title {
   margin: 0;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-weight: 600;
   line-height: 1.6;
 }
diff --git a/jsapp/js/account/security/mfa/mfaSection.scss b/jsapp/js/account/security/mfa/mfaSection.scss
index 9574550933..e7a03e97ee 100644
--- a/jsapp/js/account/security/mfa/mfaSection.scss
+++ b/jsapp/js/account/security/mfa/mfaSection.scss
@@ -12,7 +12,7 @@
     align-items: baseline;
     column-gap: sizes.$x16;
     border-top: sizes.$x1 solid;
-    border-color: colors.$kobo-gray-92;
+    border-color: colors.$kobo-gray-300;
 
     > * {
       margin: 0;
@@ -21,7 +21,7 @@
 
   .security-row__title {
     flex: 2;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     font-weight: 600;
     line-height: 1.6;
   }
@@ -45,7 +45,7 @@
 
     .toggle-switch__label {
       font-weight: 600;
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
     }
   }
 }
@@ -68,7 +68,7 @@
     margin: sizes.$x14 0;
     padding: 0 sizes.$x14 0 sizes.$x28;
     justify-content: space-between;
-    background-color: colors.$kobo-gray-92;
+    background-color: colors.$kobo-gray-300;
   }
 
   .mfa-options__label {
diff --git a/jsapp/js/account/security/password/passwordSection.module.scss b/jsapp/js/account/security/password/passwordSection.module.scss
index 812f7f329b..a741a39d13 100644
--- a/jsapp/js/account/security/password/passwordSection.module.scss
+++ b/jsapp/js/account/security/password/passwordSection.module.scss
@@ -10,7 +10,7 @@
   align-items: baseline;
   column-gap: sizes.$x16;
   border-top: sizes.$x1 solid;
-  border-color: colors.$kobo-gray-92;
+  border-color: colors.$kobo-gray-300;
 }
 
 .titleSection {
@@ -23,7 +23,7 @@
 
 .title {
   margin: 0;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-weight: 600;
   line-height: 1.6;
 }
@@ -40,7 +40,7 @@
     margin: 0;
 
     // gray circles
-    color: colors.$kobo-gray-65;
+    color: colors.$kobo-gray-500;
     cursor: default;
     font-size: sizes.$x14;
     // Allow cutoff if low on space
diff --git a/jsapp/js/account/security/sso/ssoSection.module.scss b/jsapp/js/account/security/sso/ssoSection.module.scss
index 02f02112ee..f90a601ad9 100644
--- a/jsapp/js/account/security/sso/ssoSection.module.scss
+++ b/jsapp/js/account/security/sso/ssoSection.module.scss
@@ -10,7 +10,7 @@
   align-items: baseline;
   column-gap: sizes.$x16;
   border-top: sizes.$x1 solid;
-  border-color: colors.$kobo-gray-92;
+  border-color: colors.$kobo-gray-300;
 }
 
 .titleSection {
@@ -23,7 +23,7 @@
 
 .title {
   margin: 0;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-weight: 600;
   line-height: 1.6;
 }
diff --git a/jsapp/js/account/usage/usage.module.scss b/jsapp/js/account/usage/usage.module.scss
index 07666a3f4d..7866f0a7d0 100644
--- a/jsapp/js/account/usage/usage.module.scss
+++ b/jsapp/js/account/usage/usage.module.scss
@@ -46,7 +46,7 @@
   min-width: 250px;
   width: 100%;
   border: sizes.$x1 solid;
-  border-color: colors.$kobo-gray-92;
+  border-color: colors.$kobo-gray-300;
   border-radius: sizes.$x6;
   padding: sizes.$x24;
   display: flex;
@@ -63,7 +63,7 @@
 
 .title {
   font-size: sizes.$x16;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 }
 
 .date {
diff --git a/jsapp/js/account/usage/usageContainer.module.scss b/jsapp/js/account/usage/usageContainer.module.scss
index 1478b2d08e..01c3464665 100644
--- a/jsapp/js/account/usage/usageContainer.module.scss
+++ b/jsapp/js/account/usage/usageContainer.module.scss
@@ -44,7 +44,7 @@
 }
 
 .warningIcon {
-  color: colors.$kobo-red;
+  color: colors.$kobo-mid-red;
 }
 
 .overlimit {
diff --git a/jsapp/js/account/usage/usageContainer.tsx b/jsapp/js/account/usage/usageContainer.tsx
index d641f355b3..7de56ccdce 100644
--- a/jsapp/js/account/usage/usageContainer.tsx
+++ b/jsapp/js/account/usage/usageContainer.tsx
@@ -99,7 +99,7 @@ const UsageContainer = ({
               })}
             >
               {isNearingLimit && <Icon name='warning' color='amber' size='m' />}
-              {isOverLimit && <Icon name='warning' color='red' size='m' />}
+              {isOverLimit && <Icon name='warning' color='mid-red' size='m' />}
               <strong>{limitDisplay(usage, limit)}</strong>
             </div>
           </li>
diff --git a/jsapp/js/account/usage/usageProjectBreakdown.module.scss b/jsapp/js/account/usage/usageProjectBreakdown.module.scss
index e490e1f12d..e6f94838ad 100644
--- a/jsapp/js/account/usage/usageProjectBreakdown.module.scss
+++ b/jsapp/js/account/usage/usageProjectBreakdown.module.scss
@@ -49,7 +49,7 @@
 .root th {
   font-weight: 700;
   font-size: sizes.$x13;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   text-align: initial;
   padding-block: 1.5%;
 }
@@ -57,8 +57,8 @@
 .root tr {
   font-weight: 400;
   font-size: sizes.$x16;
-  color: colors.$kobo-gray-24;
-  border-bottom: sizes.$x1 solid colors.$kobo-gray-92;
+  color: colors.$kobo-gray-800;
+  border-bottom: sizes.$x1 solid colors.$kobo-gray-300;
 }
 
 .root td {
@@ -77,11 +77,11 @@
 .pagination {
   font-weight: 400;
   font-size: sizes.$x14;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
   position: fixed;
   bottom: sizes.$x20;
   background-color: white;
-  border: sizes.$x1 solid colors.$kobo-gray-85;
+  border: sizes.$x1 solid colors.$kobo-gray-400;
   width: sizes.$x150;
   border-radius: sizes.$x4;
   padding: sizes.$x5 0;
@@ -94,18 +94,18 @@
   background: transparent;
   border: none;
   padding: 0 sizes.$x8 0 sizes.$x8;
-  color: colors.$kobo-gray-85;
+  color: colors.$kobo-gray-400;
   cursor: pointer;
 
   &.active {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 }
 
 .range {
   padding: sizes.$x6 sizes.$x6;
-  border-right: sizes.$x1 solid colors.$kobo-gray-85;
-  border-left: sizes.$x1 solid colors.$kobo-gray-85;
+  border-right: sizes.$x1 solid colors.$kobo-gray-400;
+  border-left: sizes.$x1 solid colors.$kobo-gray-400;
   flex: 1;
   text-align: center;
 }
diff --git a/jsapp/js/account/usage/yourPlan.module.scss b/jsapp/js/account/usage/yourPlan.module.scss
index 938b0ebe85..29806f4591 100644
--- a/jsapp/js/account/usage/yourPlan.module.scss
+++ b/jsapp/js/account/usage/yourPlan.module.scss
@@ -8,7 +8,7 @@
   align-items: center;
   justify-content: space-between;
   margin-block-end: 1.5em;
-  border-block: sizes.$x1 solid colors.$kobo-gray-96;
+  border-block: sizes.$x1 solid colors.$kobo-gray-200;
 }
 
 .plan {
@@ -29,7 +29,7 @@
 .subscriptionChangeNotice {
   width: 100%;
   padding: sizes.$x12 sizes.$x16;
-  background-color: colors.$kobo-gray-96;
+  background-color: colors.$kobo-gray-200;
   margin-bottom: 1.5em;
 }
 
diff --git a/jsapp/js/alertify.ts b/jsapp/js/alertify.ts
index cb3937af7c..02e8138362 100644
--- a/jsapp/js/alertify.ts
+++ b/jsapp/js/alertify.ts
@@ -10,7 +10,7 @@ import {createRoot} from 'react-dom/client';
 interface MultiConfirmButton {
   label: string;
   /** Defaults to gray. */
-  color?: 'blue' | 'dark-red';
+  color?: 'blue' | 'red';
   icon?: IconName;
   isDisabled?: boolean;
   callback: (() => void) | undefined;
@@ -65,7 +65,7 @@ export function multiConfirm(
               let buttonClass = alertify.defaults.theme.input;
               if (button.color === 'blue') {
                 buttonClass = alertify.defaults.theme.ok;
-              } else if (button.color === 'dark-red') {
+              } else if (button.color === 'red') {
                 buttonClass = alertify.defaults.theme.cancel;
               }
 
diff --git a/jsapp/js/components/RESTServices/RESTServicesForm.es6 b/jsapp/js/components/RESTServices/RESTServicesForm.es6
index 4261c63a34..47e507d7a1 100644
--- a/jsapp/js/components/RESTServices/RESTServicesForm.es6
+++ b/jsapp/js/components/RESTServices/RESTServicesForm.es6
@@ -363,7 +363,7 @@ export default class RESTServicesForm extends React.Component {
 
               <Button
                 type='bare'
-                color='dark-red'
+                color='red'
                 size='m'
                 className='http-header-row-remove'
                 data-index={n}
diff --git a/jsapp/js/components/RESTServices/RESTServicesList.es6 b/jsapp/js/components/RESTServices/RESTServicesList.es6
index 43af6d24f5..66ed340222 100644
--- a/jsapp/js/components/RESTServices/RESTServicesList.es6
+++ b/jsapp/js/components/RESTServices/RESTServicesList.es6
@@ -193,7 +193,7 @@ export default class RESTServicesList extends React.Component {
 
                     <Button
                       type='bare'
-                      color='dark-red'
+                      color='red'
                       size='m'
                       onClick={() => this.deleteHookSafe(hook.uid, hook.name)}
                       tooltip={t('Delete')}
diff --git a/jsapp/js/components/assetsTable/assetActionButtons.tsx b/jsapp/js/components/assetsTable/assetActionButtons.tsx
index 9aebe9cfe9..627faed375 100644
--- a/jsapp/js/components/assetsTable/assetActionButtons.tsx
+++ b/jsapp/js/components/assetsTable/assetActionButtons.tsx
@@ -419,7 +419,7 @@ class AssetActionButtons extends React.Component<
       let label = t('Subscribe');
 
       if (isUserSubscribed) {
-        color = 'dark-red';
+        color = 'red';
         callbackFunction = this.unsubscribeFromCollection.bind(this);
         icon = 'close';
         label = t('Unsubscribe');
diff --git a/jsapp/js/components/assetsTable/assetsTable.scss b/jsapp/js/components/assetsTable/assetsTable.scss
index c96f6b21c4..2629a37c6d 100644
--- a/jsapp/js/components/assetsTable/assetsTable.scss
+++ b/jsapp/js/components/assetsTable/assetsTable.scss
@@ -9,7 +9,7 @@
  * ========================================================================== */
 
 $assets-table-min-width: 820px;
-$assets-table-hover-bg: colors.$kobo-gray-98;
+$assets-table-hover-bg: colors.$kobo-gray-100;
 
 .form-view__cell--assets-table-wrapper {
   min-width: $assets-table-min-width + 2px;
@@ -42,7 +42,7 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
 }
 
 .assets-table__header .assets-table-row .assets-table-row__column {
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
 }
 
 .assets-table__header,
@@ -57,7 +57,7 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
 
 .assets-table__scrollbar-padding {
   // for taking the same space as scrollbar, width is being set in JS code
-  background-color: colors.$kobo-gray-96;
+  background-color: colors.$kobo-gray-200;
   align-self: stretch;
 }
 
@@ -67,8 +67,8 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
-  color: colors.$kobo-gray-40;
-  background-color: colors.$kobo-gray-96;
+  color: colors.$kobo-gray-700;
+  background-color: colors.$kobo-gray-200;
   height: 40px;
 }
 
@@ -155,7 +155,7 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
   }
 
   &:first-of-type:hover .assets-table-row__column {
-    border-top-color: colors.$kobo-gray-92;
+    border-top-color: colors.$kobo-gray-300;
   }
 
   // columns get very narrow
@@ -171,11 +171,11 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
     white-space: nowrap;
     height: 40px;
     line-height: 20px;
-    background-color: colors.$kobo-gray-96;
+    background-color: colors.$kobo-gray-200;
     padding: 10px;
 
     &:hover {
-      background-color: colors.$kobo-gray-92;
+      background-color: colors.$kobo-gray-300;
     }
 
     .k-icon {
@@ -246,9 +246,9 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
   }
 
   .assets-table-row__column {
-    border-top: 1px solid colors.$kobo-gray-92;
+    border-top: 1px solid colors.$kobo-gray-300;
     padding: 20px 10px;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
 
     &[disabled] {
       pointer-events: none;
@@ -261,7 +261,7 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
 
     &.assets-table-row__column--name {
       flex: 1;
-      color: colors.$kobo-gray-24;
+      color: colors.$kobo-gray-800;
     }
 
     &.assets-table-row__column--owner {
@@ -315,7 +315,7 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
   font-size: 12px;
   line-height: 1;
   color: currentColor;
-  background: colors.$kobo-gray-92;
+  background: colors.$kobo-gray-300;
   border-radius: 2px;
 
   &.assets-table-row__tag--gray-circle {
diff --git a/jsapp/js/components/bigModal/mfaModals.scss b/jsapp/js/components/bigModal/mfaModals.scss
index c503c476ce..a7f05185a9 100644
--- a/jsapp/js/components/bigModal/mfaModals.scss
+++ b/jsapp/js/components/bigModal/mfaModals.scss
@@ -67,7 +67,7 @@ $mfa-paragraph-spacing: sizes.$x18;
   canvas {
     display: block;
     padding: sizes.$x14;
-    border: sizes.$x1 solid colors.$kobo-gray-85;
+    border: sizes.$x1 solid colors.$kobo-gray-400;
     border-radius: 3%;
     margin: 0 auto;
   }
@@ -75,8 +75,8 @@ $mfa-paragraph-spacing: sizes.$x18;
 
 .mfa-modal__codes {
   text-align: center;
-  background-color: colors.$kobo-gray-92;
-  border: sizes.$x1 solid colors.$kobo-gray-85;
+  background-color: colors.$kobo-gray-300;
+  border: sizes.$x1 solid colors.$kobo-gray-400;
   border-radius: sizes.$x5;
   padding: sizes.$x12;
   line-break: anywhere;
diff --git a/jsapp/js/components/common/assetName.scss b/jsapp/js/components/common/assetName.scss
index 14714fe6b7..9bd36cf10a 100644
--- a/jsapp/js/components/common/assetName.scss
+++ b/jsapp/js/components/common/assetName.scss
@@ -15,7 +15,7 @@
   }
 
   small {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     margin-left: 5px;
     font-size: smaller;
     font-style: italic;
diff --git a/jsapp/js/components/common/badge.module.scss b/jsapp/js/components/common/badge.module.scss
index c1f906c581..8893576a11 100644
--- a/jsapp/js/components/common/badge.module.scss
+++ b/jsapp/js/components/common/badge.module.scss
@@ -27,7 +27,7 @@ $badge-font-l: sizes.$x14;
 }
 
 .color-light-storm {
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
   background-color: colors.$kobo-light-storm;
 }
 
diff --git a/jsapp/js/components/common/button.scss b/jsapp/js/components/common/button.scss
index ecea31c3b3..4e7e5c479d 100644
--- a/jsapp/js/components/common/button.scss
+++ b/jsapp/js/components/common/button.scss
@@ -32,7 +32,7 @@ $button-border-radius: sizes.$x6;
 
   &:hover,
   &.k-button--pending {
-    background-color: colors.$kobo-gray-92;
+    background-color: colors.$kobo-gray-300;
 
     .k-icon.k-icon-spinner {
       color: inherit;
@@ -237,23 +237,22 @@ $button-border-radius: sizes.$x6;
   @include button-full(colors.$kobo-blue, colors.$kobo-hover-blue);
 }
 
-// dark-red button ↓
-
-.k-button.k-button--color-dark-red.k-button--type-bare {
+// red button ↓
+.k-button.k-button--color-red.k-button--type-bare {
   @include button-bare(
-    colors.$kobo-dark-red,
-    color.adjust(colors.$kobo-dark-red, $lightness: -5%)
+    colors.$kobo-red,
+    colors.$kobo-dark-red
   );
 }
 
-.k-button.k-button--color-dark-red.k-button--type-frame {
-  @include button-frame(colors.$kobo-dark-red);
+.k-button.k-button--color-red.k-button--type-frame {
+  @include button-frame(colors.$kobo-red);
 }
 
-.k-button.k-button--color-dark-red.k-button--type-full {
+.k-button.k-button--color-red.k-button--type-full {
   @include button-full(
-    colors.$kobo-dark-red,
-    color.adjust(colors.$kobo-dark-red, $lightness: -5%)
+    colors.$kobo-red,
+    colors.$kobo-dark-red
   );
 }
 
diff --git a/jsapp/js/components/common/button.stories.tsx b/jsapp/js/components/common/button.stories.tsx
index 35a9c3e32f..61587b8422 100644
--- a/jsapp/js/components/common/button.stories.tsx
+++ b/jsapp/js/components/common/button.stories.tsx
@@ -9,7 +9,7 @@ const buttonTypes: ButtonType[] = ['bare', 'frame', 'full'];
 
 const buttonColors: ButtonColor[] = [
   'blue',
-  'dark-red',
+  'red',
   'dark-blue',
 ];
 
diff --git a/jsapp/js/components/common/button.tsx b/jsapp/js/components/common/button.tsx
index 691a8be42d..994dd0fd26 100644
--- a/jsapp/js/components/common/button.tsx
+++ b/jsapp/js/components/common/button.tsx
@@ -22,7 +22,7 @@ import cx from 'classnames';
 export type ButtonType = 'bare' | 'frame' | 'full';
 export type ButtonColor =
   | 'blue'
-  | 'dark-red'
+  | 'red'
   | 'dark-blue';
 
 /**
diff --git a/jsapp/js/components/common/checkbox.scss b/jsapp/js/components/common/checkbox.scss
index 0733c89b32..fee576f9d3 100644
--- a/jsapp/js/components/common/checkbox.scss
+++ b/jsapp/js/components/common/checkbox.scss
@@ -28,8 +28,8 @@
 
     .checkbox__input:checked {
       color: colors.$kobo-white;
-      border-color: colors.$kobo-gray-40;
-      background-color: colors.$kobo-gray-40;
+      border-color: colors.$kobo-gray-700;
+      background-color: colors.$kobo-gray-700;
     }
   }
 
@@ -37,7 +37,7 @@
   .checkbox__wrapper:hover {
     // Unchecked
     .checkbox__input:not(:checked) {
-      border-color: colors.$kobo-gray-40;
+      border-color: colors.$kobo-gray-700;
       background-color: colors.$kobo-bg-blue;
     }
 
@@ -57,7 +57,7 @@
 
   .checkbox__label {
     max-width: calc(100% - sizes.$x32);
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
     font-size: variables.$base-font-size;
   }
 
@@ -70,8 +70,8 @@
     appearance: none;
     position: relative;
     margin: 0;
-    color: colors.$kobo-gray-65;
-    border: sizes.$x1 solid colors.$kobo-gray-65;
+    color: colors.$kobo-gray-500;
+    border: sizes.$x1 solid colors.$kobo-gray-500;
     background-color: colors.$kobo-white;
     width: sizes.$x20;
     height: sizes.$x20;
diff --git a/jsapp/js/components/common/icon.scss b/jsapp/js/components/common/icon.scss
index 4940d14172..ca1af706d6 100644
--- a/jsapp/js/components/common/icon.scss
+++ b/jsapp/js/components/common/icon.scss
@@ -39,8 +39,8 @@ $s-icon-xl: 28px;
   color: colors.$kobo-storm;
 }
 
-.k-icon.k-icon--color-red {
-  color: colors.$kobo-red;
+.k-icon.k-icon--color-mid-red {
+  color: colors.$kobo-mid-red;
 }
 
 .k-icon.k-icon--color-blue {
diff --git a/jsapp/js/components/common/icon.stories.tsx b/jsapp/js/components/common/icon.stories.tsx
index a03fb0b26f..e5f8372deb 100644
--- a/jsapp/js/components/common/icon.stories.tsx
+++ b/jsapp/js/components/common/icon.stories.tsx
@@ -6,9 +6,11 @@ import type {IconColor} from './icon';
 
 const iconColors: Array<IconColor | undefined> = [
   undefined,
+  'mid-red',
   'storm',
-  'red',
   'teal',
+  'amber',
+  'blue',
 ];
 export default {
   title: 'common/Icon',
diff --git a/jsapp/js/components/common/icon.tsx b/jsapp/js/components/common/icon.tsx
index 51633a5afc..2b82ab68b9 100644
--- a/jsapp/js/components/common/icon.tsx
+++ b/jsapp/js/components/common/icon.tsx
@@ -7,7 +7,7 @@ import './icon.scss';
  * Check out `icon.scss` file for exact pixel values.
  */
 export type IconSize = 'l' | 'm' | 's' | 'xl' | 'xs' | 'xxs';
-export type IconColor = 'red' | 'storm' | 'teal' | 'amber' | 'blue';
+export type IconColor = 'mid-red' | 'storm' | 'teal' | 'amber' | 'blue';
 
 const DefaultSize = 's';
 
diff --git a/jsapp/js/components/common/inlineMessage.scss b/jsapp/js/components/common/inlineMessage.scss
index 669cfa6ac3..340afe2245 100644
--- a/jsapp/js/components/common/inlineMessage.scss
+++ b/jsapp/js/components/common/inlineMessage.scss
@@ -10,7 +10,7 @@
   padding: sizes.$x12 sizes.$x24;
   width: 100%;
   border-radius: sizes.$x6;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
   line-height: sizes.$x22;
 
   a {
@@ -32,13 +32,13 @@
 }
 
 .k-inline-message--type-default {
-  background-color: colors.$kobo-gray-96;
-  .k-icon {color: colors.$kobo-gray-65;}
+  background-color: colors.$kobo-gray-200;
+  .k-icon {color: colors.$kobo-gray-500;}
 }
 
 .k-inline-message--type-error {
   background-color: colors.$kobo-light-red;
-  .k-icon {color: colors.$kobo-red;}
+  .k-icon {color: colors.$kobo-mid-red;}
 }
 
 .k-inline-message--type-success {
diff --git a/jsapp/js/components/common/koboRange.scss b/jsapp/js/components/common/koboRange.scss
index fba1723f2b..3aa2e556ef 100644
--- a/jsapp/js/components/common/koboRange.scss
+++ b/jsapp/js/components/common/koboRange.scss
@@ -3,7 +3,7 @@
 @mixin rangeTrack() {
   -webkit-appearance: none;
   border-radius: 10px;
-  background: colors.$kobo-gray-92;
+  background: colors.$kobo-gray-300;
   height: 8px;
 }
 
@@ -26,7 +26,7 @@
   }
 
   .kobo-range__max-value {
-    color: colors.$kobo-gray-65;
+    color: colors.$kobo-gray-500;
   }
 
   .kobo-range__unit:not(:first-child) {
@@ -47,13 +47,13 @@ input[type='range'].kobo-range__input--default {
 }
 input[type='range'].kobo-range__input--warning {
   &::-moz-range-progress {
-    background-color: colors.$kobo-red;
+    background-color: colors.$kobo-mid-red;
   }
 
   // Chrome slider is hacked by using shadow
   &::-webkit-slider-thumb {
-    background-color: colors.$kobo-red;
-    box-shadow: -10005px 0 0 10000px colors.$kobo-red;
+    background-color: colors.$kobo-mid-red;
+    box-shadow: -10005px 0 0 10000px colors.$kobo-mid-red;
   }
 }
 input[type='range'].kobo-range__input--teal {
@@ -63,7 +63,7 @@ input[type='range'].kobo-range__input--teal {
 
   // Chrome slider is hacked by using shadow
   &::-webkit-slider-thumb {
-    background-color: colors.$kobo-red;
+    background-color: colors.$kobo-mid-red;
     box-shadow: -10005px 0 0 10000px colors.$kobo-teal;
   }
 }
diff --git a/jsapp/js/components/common/koboSelect.scss b/jsapp/js/components/common/koboSelect.scss
index b7f198eb71..f28cc1e60a 100644
--- a/jsapp/js/components/common/koboSelect.scss
+++ b/jsapp/js/components/common/koboSelect.scss
@@ -35,7 +35,7 @@ $k-select-menu-padding: sizes.$x6;
   border-color: transparent;
   border-radius: button.$button-border-radius;
   background-color: transparent;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   position: relative; // Needed for pending state.
   padding: 0 sizes.$x16;
 
@@ -55,7 +55,7 @@ $k-select-menu-padding: sizes.$x6;
 
 // Styles for when menu is opened.
 .k-select .kobo-dropdown--menu-visible .k-select__trigger {
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
 }
 
 .k-select__clear {
@@ -70,7 +70,7 @@ $k-select-menu-padding: sizes.$x6;
 }
 
 .k-select__trigger-selected-option:not(.k-select__trigger-selected-option--empty) label {
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
 }
 
 .k-select__menu {
@@ -94,8 +94,8 @@ $k-select-menu-padding: sizes.$x6;
 
   &:hover,
   &.k-select__option--selected {
-    color: colors.$kobo-gray-24;
-    background-color: colors.$kobo-gray-96;
+    color: colors.$kobo-gray-800;
+    background-color: colors.$kobo-gray-200;
   }
 
   &:focus-visible {
@@ -115,7 +115,7 @@ $k-select-menu-padding: sizes.$x6;
   justify-content: space-between;
   width: 100%;
   height: $k-select-option-height;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   padding: 0 #{sizes.$x16 - sizes.$x2};
   text-align: initial;
 }
@@ -137,7 +137,7 @@ $k-select-menu-padding: sizes.$x6;
 .k-select.k-select--has-error {
   &.k-select--type-outline {
     .k-select__trigger {
-      border-color: colors.$kobo-red;
+      border-color: colors.$kobo-mid-red;
     }
   }
 
@@ -248,7 +248,7 @@ $k-select-menu-padding: sizes.$x6;
   }
 
   .k-select__trigger .k-icon {
-    color: colors.$kobo-gray-65;
+    color: colors.$kobo-gray-500;
   }
 }
 
@@ -259,7 +259,7 @@ $k-select-menu-padding: sizes.$x6;
 
   &:not(.k-select--is-menu-visible) .k-select__trigger:hover,
   &.k-select--is-pending .k-select__trigger {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
     background-color: darken(colors.$kobo-bg-blue, 2);
   }
 }
@@ -271,21 +271,21 @@ $k-select-menu-padding: sizes.$x6;
 
   &:not(.k-select--is-menu-visible) .k-select__trigger:hover,
   &.k-select--is-pending .k-select__trigger {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
     background-color: darken(colors.$kobo-light-storm, 2);
   }
 }
 
 .k-select.k-select--type-outline {
   .k-select__trigger {
-    border-color: colors.$kobo-gray-92;
+    border-color: colors.$kobo-gray-300;
     background-color: colors.$kobo-white;
   }
 
   &:not(.k-select--is-menu-visible) .k-select__trigger:hover,
   &.k-select--is-pending .k-select__trigger {
-    border-color: colors.$kobo-gray-85;
-    color: colors.$kobo-gray-24;
+    border-color: colors.$kobo-gray-400;
+    color: colors.$kobo-gray-800;
   }
 
   &.k-select--is-menu-visible {
@@ -304,13 +304,13 @@ $k-select-menu-padding: sizes.$x6;
   }
 
   .k-select__trigger .k-icon {
-    color: colors.$kobo-gray-85;
+    color: colors.$kobo-gray-400;
   }
 }
 
 // This needs to have stronger specificity because of `.form-modal__item`
 .k-select label.k-select__label {
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
   font-size: sizes.$x12;
   line-height: textBox.$label-leading;
   margin-bottom: textBox.$label-margin;
@@ -321,7 +321,7 @@ $k-select-menu-padding: sizes.$x6;
   // Smaller than the design, because there is also a single whitespace
   // character between the label and this mark
   margin-left: sizes.$x2;
-  color: colors.$kobo-red;
+  color: colors.$kobo-mid-red;
   font-size: sizes.$x14;
   // Magic number to align it similarly to Figma designs
   line-height: sizes.$x16;
diff --git a/jsapp/js/components/common/koboTagsInput.scss b/jsapp/js/components/common/koboTagsInput.scss
index 70606153d0..9530229ea6 100644
--- a/jsapp/js/components/common/koboTagsInput.scss
+++ b/jsapp/js/components/common/koboTagsInput.scss
@@ -8,7 +8,7 @@ placese. As soon as these are removed, we can simplify this file.
 */
 
 .react-tagsinput {
-  border: sizes.$x1 solid colors.$kobo-gray-92;
+  border: sizes.$x1 solid colors.$kobo-gray-300;
   border-radius: sizes.$x8;
   padding: sizes.$x8 sizes.$x8 sizes.$x4;
 
@@ -21,14 +21,14 @@ placese. As soon as these are removed, we can simplify this file.
   &.react-tagsinput-invalid {
     .react-tagsinput-input {
       color: colors.$kobo-red;
-      border-bottom-color: colors.$kobo-red;
+      border-bottom-color: colors.$kobo-mid-red;
     }
   }
 }
 
 .react-tagsinput-tag {
-  color: colors.$kobo-gray-24;
-  background-color: colors.$kobo-gray-92;
+  color: colors.$kobo-gray-800;
+  background-color: colors.$kobo-gray-300;
   font-weight: 400;
   margin-bottom: sizes.$x4;
   margin-right: sizes.$x4;
@@ -59,7 +59,7 @@ placese. As soon as these are removed, we can simplify this file.
 .react-tagsinput input[type].react-tagsinput-input {
   background: transparent;
   border: 0 none;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-family: sans-serif;
   font-weight: 400;
   margin-top: sizes.$x2;
@@ -70,7 +70,7 @@ placese. As soon as these are removed, we can simplify this file.
   min-width: 90px;
 
   &::placeholder {
-    color: colors.$kobo-gray-55;
+    color: colors.$kobo-gray-600;
     opacity: 1;
   }
 
diff --git a/jsapp/js/components/common/miniAudioPlayer.scss b/jsapp/js/components/common/miniAudioPlayer.scss
index 6073ca7403..cabe1e3c8c 100644
--- a/jsapp/js/components/common/miniAudioPlayer.scss
+++ b/jsapp/js/components/common/miniAudioPlayer.scss
@@ -17,7 +17,7 @@
 }
 
 .mini-audio-player.mini-audio-player--is-loading {
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 }
 
 .mini-audio-player.mini-audio-player--is-broken {
diff --git a/jsapp/js/components/common/modal.scss b/jsapp/js/components/common/modal.scss
index c3e09d6d0f..68ff0de40b 100644
--- a/jsapp/js/components/common/modal.scss
+++ b/jsapp/js/components/common/modal.scss
@@ -20,7 +20,7 @@ $z-modal-x: 10;
   z-index: $z-modal-backdrop;
   top: 0px;
   left: 0px;
-  background-color: rgba(colors.$kobo-gray-24, 0.4) !important;
+  background-color: rgba(colors.$kobo-gray-800, 0.4) !important;
 }
 
 .modal {
@@ -142,7 +142,7 @@ $z-modal-x: 10;
   .modal-submission &,
   .modal--media-preview &,
   .modal--mfa-setup & {
-    color: colors.$kobo-gray-55;
+    color: colors.$kobo-gray-600;
   }
 }
 
@@ -151,10 +151,10 @@ $z-modal-x: 10;
 // Unfortunately we can't rely on `overflow: hidden` being there, so negative
 // margins hack isn't good enough. Other hacks are no good too.
 .modal__subheader {
-  background: colors.$kobo-gray-96;
+  background: colors.$kobo-gray-200;
   padding: 20px 30px;
   margin: -30px -30px 20px;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 
   i {
     margin: 5px 10px 10px 3px;
@@ -188,7 +188,7 @@ $z-modal-x: 10;
 .modal__hr {
   margin: 20px -30px;
   border: 0;
-  background-color: colors.$kobo-gray-92;
+  background-color: colors.$kobo-gray-300;
   height: 1px;
 }
 
@@ -210,7 +210,7 @@ $modal-custom-header-height: sizes.$x60;
   }
 
   .modal__header {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
     height: $modal-custom-header-height;
 
     .modal__x {
@@ -236,13 +236,13 @@ $modal-custom-header-height: sizes.$x60;
   min-height: 0;
 
   .modal__header {
-    background-color: colors.$kobo-gray-98;
+    background-color: colors.$kobo-gray-100;
     font-size: sizes.$x24;
     padding: sizes.$x32 sizes.$x32 sizes.$x48 sizes.$x32;
 
     .modal__x {
       font-size: sizes.$x12;
-      color: rgba(colors.$kobo-gray-24, 0.4);
+      color: rgba(colors.$kobo-gray-800, 0.4);
     }
   }
 
@@ -260,7 +260,7 @@ $modal-custom-header-height: sizes.$x60;
   min-width: 25%;
 
   .modal__content {
-    background-color: colors.$kobo-gray-98;
+    background-color: colors.$kobo-gray-100;
   }
 
   .modal__header {
@@ -282,7 +282,7 @@ $modal-custom-header-height: sizes.$x60;
         margin-right: 6px;
 
         i.k-icon {
-          color: colors.$kobo-gray-65;
+          color: colors.$kobo-gray-500;
           margin-right: 6px;
           font-size: 20px;
         }
@@ -325,7 +325,7 @@ $modal-custom-header-height: sizes.$x60;
 .enketo-iframe-icon {
   color: colors.$kobo-white;
   background-image: url("~/node_modules/jquery-ui/themes/base/images/ui-icons_ffffff_256x240.png");
-  background-color: colors.$kobo-gray-65;
+  background-color: colors.$kobo-gray-500;
   background-position: -81px -129px;
   position: absolute;
   right: 6px;
@@ -370,9 +370,9 @@ $modal-custom-header-height: sizes.$x60;
       display: inline-block;
       vertical-align: top;
       border: none;
-      background: colors.$kobo-gray-96;
+      background: colors.$kobo-gray-200;
       border-radius: 6px;
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
       cursor: pointer;
       margin: 0.5*$buttons-spacing;
       padding: $buttons-spacing;
@@ -394,8 +394,8 @@ $modal-custom-header-height: sizes.$x60;
       }
 
       &:hover {
-        color: colors.$kobo-gray-24;
-        background-color: colors.$kobo-gray-92;
+        color: colors.$kobo-gray-800;
+        background-color: colors.$kobo-gray-300;
       }
 
       &:active {
@@ -407,9 +407,9 @@ $modal-custom-header-height: sizes.$x60;
     }
   }
   .dropzone {
-    background: colors.$kobo-gray-96;
+    background: colors.$kobo-gray-200;
     padding: 30px;
-    border: 2px dashed colors.$kobo-gray-92;
+    border: 2px dashed colors.$kobo-gray-300;
     cursor: pointer;
     border-radius: 6px;
     text-align: center;
@@ -455,7 +455,7 @@ $modal-custom-header-height: sizes.$x60;
     margin-top: 10px;
 
     input[type="text"] {
-      background-color: rgba(colors.$kobo-gray-24, 0.05);
+      background-color: rgba(colors.$kobo-gray-800, 0.05);
       padding: 5px;
     }
   }
@@ -481,7 +481,7 @@ $modal-custom-header-height: sizes.$x60;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-top: 1px solid colors.$kobo-gray-92;
+    border-top: 1px solid colors.$kobo-gray-300;
     padding: 6px 0px;
 
     .form-view__cell--translation-name {
@@ -504,7 +504,7 @@ $modal-custom-header-height: sizes.$x60;
   .form-view__cell--add-language {
     padding-top: 20px;
     text-align: right;
-    border-top: 1px solid colors.$kobo-gray-92;
+    border-top: 1px solid colors.$kobo-gray-300;
   }
 
   .form-view__cell--add-language-form {
@@ -524,7 +524,7 @@ $modal-custom-header-height: sizes.$x60;
   .translation-table-container {
     flex: 1;
     overflow-y: auto;
-    border: 1px solid colors.$kobo-gray-92;
+    border: 1px solid colors.$kobo-gray-300;
   }
 
   .form-view__cell--add-language-form,
@@ -551,7 +551,7 @@ $modal-custom-header-height: sizes.$x60;
 
     .rt-thead.-header {
       box-shadow: none;
-      border-bottom: 2px solid colors.$kobo-gray-92;
+      border-bottom: 2px solid colors.$kobo-gray-300;
     }
 
     .rt-thead > .rt-tr,
@@ -560,13 +560,13 @@ $modal-custom-header-height: sizes.$x60;
         white-space: normal;
 
         .rt-td--disabled {
-          color: colors.$kobo-gray-65;
+          color: colors.$kobo-gray-500;
         }
       }
       > .rt-th:first-child,
       > .rt-td:first-child {
         min-width: 30%;
-        color: colors.$kobo-gray-40;
+        color: colors.$kobo-gray-700;
       }
 
       > .rt-th:last-child,
@@ -575,7 +575,7 @@ $modal-custom-header-height: sizes.$x60;
       }
       .translation {
         padding: 0px;
-        color: colors.$kobo-gray-40;
+        color: colors.$kobo-gray-700;
         textarea {
           background: colors.$kobo-light-green;
           display: block;
@@ -583,13 +583,13 @@ $modal-custom-header-height: sizes.$x60;
           border: none;
           width: 100%;
           height: 100% !important;
-          color: colors.$kobo-gray-24;
+          color: colors.$kobo-gray-800;
           &:focus {
             background: colors.$kobo-white;
           }
           &:disabled {
-            color: colors.$kobo-gray-65;
-            background-color: colors.$kobo-gray-96;
+            color: colors.$kobo-gray-500;
+            background-color: colors.$kobo-gray-200;
           }
         }
       }
@@ -613,7 +613,7 @@ $modal-custom-header-height: sizes.$x60;
 
   .form-view__cell--add-language-form,
   .form-view__cell--update-language-form {
-    background: colors.$kobo-gray-96;
+    background: colors.$kobo-gray-200;
     padding: 15px;
     position: relative;
 
diff --git a/jsapp/js/components/common/multiCheckbox.scss b/jsapp/js/components/common/multiCheckbox.scss
index 0306bd7bbb..8fe060e0d8 100644
--- a/jsapp/js/components/common/multiCheckbox.scss
+++ b/jsapp/js/components/common/multiCheckbox.scss
@@ -16,6 +16,6 @@
 
 .multi-checkbox.multi-checkbox--type-frame {
   padding: sizes.$x12;
-  border: sizes.$x1 solid colors.$kobo-gray-92;
+  border: sizes.$x1 solid colors.$kobo-gray-300;
   border-radius: sizes.$x2;
 }
diff --git a/jsapp/js/components/common/radio.scss b/jsapp/js/components/common/radio.scss
index 02ea3fbeab..15c6cb31ef 100644
--- a/jsapp/js/components/common/radio.scss
+++ b/jsapp/js/components/common/radio.scss
@@ -25,7 +25,7 @@
 
   .radio__label {
     max-width: calc(100% - sizes.$x32);
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
     font-size: variables.$base-font-size;
   }
 
@@ -38,7 +38,7 @@
     appearance: none;
     position: relative;
     margin: 0;
-    color: colors.$kobo-gray-65;
+    color: colors.$kobo-gray-500;
     border: sizes.$x1 solid currentcolor;
     background-color: colors.$kobo-white;
     width: sizes.$x20;
@@ -82,13 +82,13 @@
     }
 
     .radio__input:checked {
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
     }
   }
 
   // Hover unchecked state
   .radio__row:hover .radio__input:not(:checked) {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     background-color: colors.$kobo-bg-blue;
   }
 
diff --git a/jsapp/js/components/common/tabs.module.scss b/jsapp/js/components/common/tabs.module.scss
index 846bd5b5be..7be7e726e3 100644
--- a/jsapp/js/components/common/tabs.module.scss
+++ b/jsapp/js/components/common/tabs.module.scss
@@ -7,14 +7,14 @@
   margin: 0 sizes.$x40;
   display: flex;
   flex-direction: row;
-  border-bottom: sizes.$x2 solid colors.$kobo-gray-85;
+  border-bottom: sizes.$x2 solid colors.$kobo-gray-400;
 }
 
 .tab {
   background: transparent;
   cursor: pointer;
   font-size: sizes.$x18;
-  color: colors.$kobo-gray-55;
+  color: colors.$kobo-gray-600;
   font-weight: 600;
   padding: sizes.$x14 sizes.$x30 sizes.$x10;
   margin-bottom: -(sizes.$x2);
diff --git a/jsapp/js/components/common/textBox.module.scss b/jsapp/js/components/common/textBox.module.scss
index 42dd52ad2a..d74a1c2899 100644
--- a/jsapp/js/components/common/textBox.module.scss
+++ b/jsapp/js/components/common/textBox.module.scss
@@ -8,7 +8,7 @@
 // because of too general styles of Form Builder.
 // See: https://github.com/kobotoolbox/kpi/issues/3914
 
-$input-color: colors.$kobo-gray-24;
+$input-color: colors.$kobo-gray-800;
 $wrapper-border-radius: sizes.$x6;
 // This is being shared by multiple components
 $label-margin: sizes.$x3;
@@ -19,26 +19,26 @@ $label-leading: sizes.$x20;
 
   &.hasValue {
     .inputWrapper {
-      border-color: colors.$kobo-gray-85;
+      border-color: colors.$kobo-gray-400;
     }
   }
 
   &.isDisabled {
     .inputWrapper {
-      color: colors.$kobo-gray-65;
-      background-color: colors.$kobo-gray-98;
-      border-color: colors.$kobo-gray-65;
+      color: colors.$kobo-gray-500;
+      background-color: colors.$kobo-gray-100;
+      border-color: colors.$kobo-gray-500;
     }
 
     .startIcon,
     .endIcon {
-      color: colors.$kobo-gray-65;
+      color: colors.$kobo-gray-500;
     }
   }
 
   &.hasError {
     .inputWrapper {
-      border-color: colors.$kobo-red;
+      border-color: colors.$kobo-mid-red;
     }
 
     .input {
@@ -54,7 +54,7 @@ $label-leading: sizes.$x20;
 }
 
 .label {
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
   font-size: sizes.$x12;
   line-height: $label-leading;
   margin-bottom: $label-margin;
@@ -78,7 +78,7 @@ $label-leading: sizes.$x20;
   align-content: flex-start;
   color: $input-color;
   background-color: colors.$kobo-white;
-  border: sizes.$x1 solid colors.$kobo-gray-92;
+  border: sizes.$x1 solid colors.$kobo-gray-300;
   padding: 0; // size dictates the paddings
   border-radius: $wrapper-border-radius;
   cursor: text;
@@ -106,16 +106,16 @@ input[class].input.input {
   }
 
   &:disabled {
-    color: colors.$kobo-gray-65;
+    color: colors.$kobo-gray-500;
     pointer-events: none;
 
     &::placeholder {
-      color: colors.$kobo-gray-55;
+      color: colors.$kobo-gray-600;
     }
   }
 
   &::placeholder {
-    color: colors.$kobo-gray-55;
+    color: colors.$kobo-gray-600;
     opacity: 1;
   }
 }
@@ -127,7 +127,7 @@ textarea[class].input.input {
 
 .startIcon,
 .endIcon {
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 }
 
 .startIcon {
diff --git a/jsapp/js/components/common/textBox.tsx b/jsapp/js/components/common/textBox.tsx
index 6a22e451b8..667a298f63 100644
--- a/jsapp/js/components/common/textBox.tsx
+++ b/jsapp/js/components/common/textBox.tsx
@@ -264,7 +264,7 @@ export default function TextBox(props: TextBoxProps) {
           <Icon
             size={iconSize}
             name='alert'
-            color='red'
+            color='mid-red'
             className={styles.errorIcon}
           />
         )}
diff --git a/jsapp/js/components/common/toggleSwitch.scss b/jsapp/js/components/common/toggleSwitch.scss
index f13934b127..62f41795de 100644
--- a/jsapp/js/components/common/toggleSwitch.scss
+++ b/jsapp/js/components/common/toggleSwitch.scss
@@ -25,7 +25,7 @@
     position: relative;
     width: 30px;
     height: 20px;
-    background-color: colors.$kobo-gray-65;
+    background-color: colors.$kobo-gray-500;
     transition: 0.3s cubic-bezier(1, 0, 0.5, 1);
     border-radius: 34px;
 
@@ -64,7 +64,7 @@
   }
 
   .toggle-switch__label {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
     font-size: variables.$base-font-size;
   }
 }
diff --git a/jsapp/js/components/common/tooltip.scss b/jsapp/js/components/common/tooltip.scss
index 5596b1e49e..97f0da7c8f 100644
--- a/jsapp/js/components/common/tooltip.scss
+++ b/jsapp/js/components/common/tooltip.scss
@@ -34,7 +34,7 @@ Additional class names:
       font-size: 13px;
       line-height: 1.35em;
       color: colors.$kobo-white;
-      background-color: colors.$kobo-gray-40;
+      background-color: colors.$kobo-gray-700;
       padding: 6px 12px;
       top: 96%;
       left: 50%;
@@ -45,7 +45,7 @@ Additional class names:
 
     &::before {
       content: "";
-      border-bottom: 5px solid colors.$kobo-gray-40;
+      border-bottom: 5px solid colors.$kobo-gray-700;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       top: calc(96% - 5px);
@@ -74,7 +74,7 @@ Additional class names:
       left: calc(95% - 5px);
       top: 50%;
       transform: translate(0, -50%);
-      border-right: 5px solid colors.$kobo-gray-40;
+      border-right: 5px solid colors.$kobo-gray-700;
       border-bottom: 5px solid transparent;
       border-top: 5px solid transparent;
       border-left: none;
diff --git a/jsapp/js/components/dataAttachments/connect-projects.scss b/jsapp/js/components/dataAttachments/connect-projects.scss
index 770dade74a..0e6edf2090 100644
--- a/jsapp/js/components/dataAttachments/connect-projects.scss
+++ b/jsapp/js/components/dataAttachments/connect-projects.scss
@@ -53,7 +53,7 @@
   gap: 12px;
   padding-top: sizes.$x12;
   margin-top: sizes.$x12;
-  border-top: sizes.$x1 solid colors.$kobo-gray-92;
+  border-top: sizes.$x1 solid colors.$kobo-gray-300;
 }
 
 .connect-projects__import .connect-projects__import-form {
@@ -71,7 +71,7 @@
     min-width: 280px;
 
     .kobo-select__placeholder {
-      color: colors.$kobo-gray-24;
+      color: colors.$kobo-gray-800;
     }
   }
 
@@ -88,7 +88,7 @@
     margin-top: sizes.$x20;
     font-size: variables.$base-font-size;
     font-weight: bold;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
   }
 
   .connect-projects__import-list-item,
@@ -99,12 +99,12 @@
     margin-top: sizes.$x8;
     margin-bottom: sizes.$x10;
     border-bottom: sizes.$x1 solid;
-    border-color: colors.$kobo-gray-92;
+    border-color: colors.$kobo-gray-300;
   }
 
   .connect-projects__import-list-item--no-imports {
     font-style: italic;
-    color: colors.$kobo-gray-65;
+    color: colors.$kobo-gray-500;
     // Match vertcial height of a regular list item
     padding: 11px 0 11px 11px;
   }
@@ -127,7 +127,7 @@
       .connect-projects__import-labels-source {
         margin-left: sizes.$x24;
         font-weight: 400;
-        color: colors.$kobo-gray-40;
+        color: colors.$kobo-gray-700;
       }
     }
 
@@ -139,7 +139,7 @@
 }
 
 .form-modal__form.form-modal__form--data-attachment-columns {
-  color: colors.$kobo-gray-55;
+  color: colors.$kobo-gray-600;
 
   .bulk-options {
     margin-top: sizes.$x14;
diff --git a/jsapp/js/components/dataAttachments/connectProjects.es6 b/jsapp/js/components/dataAttachments/connectProjects.es6
index e8e571f2aa..958c1d283c 100644
--- a/jsapp/js/components/dataAttachments/connectProjects.es6
+++ b/jsapp/js/components/dataAttachments/connectProjects.es6
@@ -495,7 +495,7 @@ class ConnectProjects extends React.Component {
                   <div className='connect-projects__import-options'>
                     <Button
                       type='frame'
-                      color='dark-red'
+                      color='red'
                       size='m'
                       startIcon='trash'
                       onClick={() => this.onRemoveAttachment(item.attachmentUrl)}
diff --git a/jsapp/js/components/formGallery/formGallery.component.scss b/jsapp/js/components/formGallery/formGallery.component.scss
index 6cec05427d..c8acd93cc9 100644
--- a/jsapp/js/components/formGallery/formGallery.component.scss
+++ b/jsapp/js/components/formGallery/formGallery.component.scss
@@ -21,7 +21,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: sizes.$x1 solid colors.$kobo-gray-92;
+  border-bottom: sizes.$x1 solid colors.$kobo-gray-300;
 }
 
 .gallery__header-icons {
diff --git a/jsapp/js/components/formSummary.scss b/jsapp/js/components/formSummary.scss
index 131fb9821f..fe47ff7186 100644
--- a/jsapp/js/components/formSummary.scss
+++ b/jsapp/js/components/formSummary.scss
@@ -56,7 +56,7 @@
   display: flex;
 
   .form-view__cell {
-    border: 1px solid colors.$kobo-gray-92;
+    border: 1px solid colors.$kobo-gray-300;
     padding: 20px;
     flex: 2;
     margin-right: 10px;
@@ -83,8 +83,8 @@
     border: 0;
     background: transparent;
     padding: 6px 10px;
-    color: colors.$kobo-gray-40;
-    border-bottom: 1px solid colors.$kobo-gray-92;
+    color: colors.$kobo-gray-700;
+    border-bottom: 1px solid colors.$kobo-gray-300;
     position: relative;
     text-align: initial;
 
@@ -93,7 +93,7 @@
     }
 
     &:hover {
-      color: colors.$kobo-gray-24;
+      color: colors.$kobo-gray-800;
     }
 
     .k-icon:not(.k-icon-angle-right) {
@@ -130,7 +130,7 @@
 
   a.team-sharing-button {
     cursor: pointer;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     position: absolute;
     right: 0px;
     top: -2px;
@@ -155,7 +155,7 @@
     justify-content: center;
     align-items: center;
     display: flex;
-    border: 1px solid colors.$kobo-gray-92;
+    border: 1px solid colors.$kobo-gray-300;
 
     span {
       font-size: 16px;
diff --git a/jsapp/js/components/languages/languageSelector.scss b/jsapp/js/components/languages/languageSelector.scss
index 408c6ef987..c9f042c481 100644
--- a/jsapp/js/components/languages/languageSelector.scss
+++ b/jsapp/js/components/languages/languageSelector.scss
@@ -29,7 +29,7 @@
 // The arrow icon
 .language-selector__search-box-row > .k-icon {
   margin: 0 sizes.$x20;
-  color: colors.$kobo-gray-85;
+  color: colors.$kobo-gray-400;
   transform: translateY(11px);
 }
 
@@ -39,7 +39,7 @@
 
 .language-selector__source-label,
 .language-selector__search-box-label {
-  color: colors.$kobo-gray-55;
+  color: colors.$kobo-gray-600;
   font-size: sizes.$x12;
   line-height: 1;
   display: block;
@@ -64,12 +64,12 @@
 
 .language-selector__source-language > .k-icon {
   margin-right: sizes.$x6;
-  color: colors.$kobo-gray-65;
+  color: colors.$kobo-gray-500;
 }
 
 .language-selector__selected-language,
 .language-selector__search-box {
-  border: sizes.$x2 solid colors.$kobo-gray-92;
+  border: sizes.$x2 solid colors.$kobo-gray-300;
   border-radius: sizes.$x6;
   height: sizes.$x40;
   line-height: sizes.$x40 - (2 * sizes.$x2); // minus the border
@@ -86,7 +86,7 @@
     pointer-events: none;
     position: absolute;
     left: sizes.$x12;
-    color: colors.$kobo-gray-85;
+    color: colors.$kobo-gray-400;
   }
 }
 
@@ -114,7 +114,7 @@
 .language-selector__search-box-input {
   &::placeholder {
     opacity: 1;
-    color: colors.$kobo-gray-55;
+    color: colors.$kobo-gray-600;
   }
   &:focus {
     outline: none;
@@ -125,10 +125,10 @@
 .language-selector__clear-search-box {
   @include mixins.buttonReset();
   margin-right: sizes.$x12;
-  color: colors.$kobo-gray-85;
+  color: colors.$kobo-gray-400;
 
   &:hover {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 
   .k-icon.k-icon-close {
@@ -190,7 +190,7 @@
 }
 
 .language-selector__help-bar {
-  border-top: sizes.$x2 solid colors.$kobo-gray-92;
+  border-top: sizes.$x2 solid colors.$kobo-gray-300;
   display: flex;
   flex-direction: row;
   align-content: center;
@@ -208,5 +208,5 @@
   // Bottom margin is bigger to be in line with what <li> already have.
   margin: sizes.$x5 0 #{sizes.$x5 + sizes.$x5} 0;
   padding: 0;
-  background-color: colors.$kobo-gray-92;
+  background-color: colors.$kobo-gray-300;
 }
diff --git a/jsapp/js/components/languages/regionSelector.scss b/jsapp/js/components/languages/regionSelector.scss
index 62e8540967..8e7c60f302 100644
--- a/jsapp/js/components/languages/regionSelector.scss
+++ b/jsapp/js/components/languages/regionSelector.scss
@@ -20,7 +20,7 @@
   padding: 0 sizes.$x1 0 sizes.$x10;
   border-width: button.$button-border-width;
   border-style: solid;
-  border-color: colors.$kobo-gray-92;
+  border-color: colors.$kobo-gray-300;
   border-radius: button.$button-border-radius;
 
   &:not(:last-child) {
diff --git a/jsapp/js/components/library/assetBreadcrumbs.scss b/jsapp/js/components/library/assetBreadcrumbs.scss
index 1f23a361ea..2a49389baa 100644
--- a/jsapp/js/components/library/assetBreadcrumbs.scss
+++ b/jsapp/js/components/library/assetBreadcrumbs.scss
@@ -11,19 +11,19 @@
   align-items: center;
 
   &.breadcrumbs--gray-wrapper {
-    background: colors.$kobo-gray-96;
+    background: colors.$kobo-gray-200;
     padding: #{(variables.$s-breadcrumbs-height - 40px) * 0.5} 20px;
     height: variables.$s-breadcrumbs-height;
   }
 
   .breadcrumbs__crumb,
   .breadcrumbs__divider {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
   }
 
   .breadcrumbs__crumb {
     &:last-of-type {
-      color: colors.$kobo-gray-24;
+      color: colors.$kobo-gray-800;
     }
   }
 
diff --git a/jsapp/js/components/library/assetInfoBox.scss b/jsapp/js/components/library/assetInfoBox.scss
index 2e3ecbf6c3..792ce8e6f9 100644
--- a/jsapp/js/components/library/assetInfoBox.scss
+++ b/jsapp/js/components/library/assetInfoBox.scss
@@ -3,7 +3,7 @@
 .asset-info-box {
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid colors.$kobo-gray-92;
+  border-bottom: 1px solid colors.$kobo-gray-300;
   padding-bottom: 5px;
   line-height: 24px;
 
@@ -21,7 +21,7 @@
     flex: 1;
 
     label {
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
 
       &::after {
         content: ": ";
diff --git a/jsapp/js/components/library/assetPublicButton.tsx b/jsapp/js/components/library/assetPublicButton.tsx
index ed38b699db..d85d8951cf 100644
--- a/jsapp/js/components/library/assetPublicButton.tsx
+++ b/jsapp/js/components/library/assetPublicButton.tsx
@@ -129,7 +129,7 @@ export default class AssetPublicButton extends React.Component<
       return (
         <Button
           type='frame'
-          color='dark-red'
+          color='red'
           size='m'
           startIcon='close'
           label={t('Make private')}
diff --git a/jsapp/js/components/map.marker-colors.scss b/jsapp/js/components/map.marker-colors.scss
index eab5fc4d5b..3c6adfa6e2 100644
--- a/jsapp/js/components/map.marker-colors.scss
+++ b/jsapp/js/components/map.marker-colors.scss
@@ -16,7 +16,7 @@
   }
 
   &.default-overlay-marker {
-    background: rgba(colors.$kobo-gray-24, 0.7);
+    background: rgba(colors.$kobo-gray-800, 0.7);
     border: none;
     border-radius: 0;
   }
@@ -64,7 +64,7 @@ $colorLength: list.length($colorsA);
   }
 
   .map-marker.#{$class-slug}#{$i + $colorLength * 4} {
-    background-image: linear-gradient(90deg, rgba(colors.$kobo-gray-24, 0.1) 50%, transparent 50%), linear-gradient(rgba(colors.$kobo-gray-24, 0.1) 50%, transparent 50%);
+    background-image: linear-gradient(90deg, rgba(colors.$kobo-gray-800, 0.1) 50%, transparent 50%), linear-gradient(rgba(colors.$kobo-gray-800, 0.1) 50%, transparent 50%);
     background-size: 6px 6px;
   }
 }
diff --git a/jsapp/js/components/map.scss b/jsapp/js/components/map.scss
index 2595fc7e05..fc62b03375 100644
--- a/jsapp/js/components/map.scss
+++ b/jsapp/js/components/map.scss
@@ -35,7 +35,7 @@
     background: colors.$kobo-white;
     z-index: z-indexes.$z-map-settings-2;
     cursor: pointer;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
 
     &--heatmap {
       top: 118px;
@@ -61,7 +61,7 @@
 
     &.active,
     &:hover {
-      color: colors.$kobo-gray-24;
+      color: colors.$kobo-gray-800;
     }
 
     &:active {
@@ -114,7 +114,7 @@
 
     border-radius: 6px;
     padding: 12px;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
   }
 
   .popover-menu__content {
@@ -125,12 +125,12 @@
     overflow: auto;
     max-height: 300px;
     border-radius: 5px;
-    box-shadow: 0 0 5px 5px rgba(colors.$kobo-gray-24, 0.15);
+    box-shadow: 0 0 5px 5px rgba(colors.$kobo-gray-800, 0.15);
     bottom: calc(100% + 10px);
 
     .popover-menu__link.see-all {
-      background: colors.$kobo-gray-96;
-      border-top: 1px solid colors.$kobo-gray-92;
+      background: colors.$kobo-gray-200;
+      border-top: 1px solid colors.$kobo-gray-300;
     }
 
     .popover-menu__heading {
@@ -210,7 +210,7 @@ body .leaflet-control-layers,
     }
 
     &.selected {
-      background: colors.$kobo-gray-96;
+      background: colors.$kobo-gray-200;
 
       &::after {
         content: "";
@@ -223,7 +223,7 @@ body .leaflet-control-layers,
 
       &::after {
         content: "";
-        background: colors.$kobo-gray-65;
+        background: colors.$kobo-gray-500;
       }
 
       &:hover {
@@ -261,7 +261,7 @@ body .leaflet-control-layers,
     padding: 0 3px;
     position: relative;
     text-shadow: 0 0 1px colors.$kobo-white;
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
 
     &::after {
       position: absolute;
@@ -304,13 +304,13 @@ body .leaflet-control-layers,
   }
 
   .form-modal__item--list-files {
-    border: 1px solid colors.$kobo-gray-92;
+    border: 1px solid colors.$kobo-gray-300;
     padding: 10px;
     max-width: 600px;
     margin-bottom: 20px;
 
     .list-file-row {
-      border-top: 1px solid colors.$kobo-gray-92;
+      border-top: 1px solid colors.$kobo-gray-300;
       padding: 5px;
 
       > span {
@@ -336,7 +336,7 @@ body .leaflet-control-layers,
 
         i {
           font-size: 24px;
-          color: colors.$kobo-red;
+          color: colors.$kobo-mid-red;
         }
       }
     }
@@ -464,7 +464,7 @@ body .leaflet-control-layers,
   margin-left: 5px;
   margin-top: 5px;
   text-align: center;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
 }
 
 .marker-cluster span {
diff --git a/jsapp/js/components/mapSettings.es6 b/jsapp/js/components/mapSettings.es6
index 76bba9768d..9fa2579c9a 100644
--- a/jsapp/js/components/mapSettings.es6
+++ b/jsapp/js/components/mapSettings.es6
@@ -414,7 +414,7 @@ class MapSettings extends React.Component {
             {userCan('change_asset', this.props.asset) && queryLimit !== QUERY_LIMIT_DEFAULT &&
               <Button
                 type='frame'
-                color='dark-red'
+                color='red'
                 size='l'
                 onClick={this.resetMapSettings.bind(this)}
                 label={t('Reset')}
diff --git a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6 b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
index db8832fdeb..f5d4259832 100644
--- a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
+++ b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
@@ -389,7 +389,7 @@ class BulkEditSubmissionsForm extends React.Component {
         <bem.Modal__footer>
           <Button
             type='full'
-            color='dark-red'
+            color='red'
             size='l'
             onClick={this.onReset.bind(this)}
             isDisabled={this.state.isPending || Object.keys(this.state.overrides).length === 0}
diff --git a/jsapp/js/components/modalForms/encryptForm.es6 b/jsapp/js/components/modalForms/encryptForm.es6
index 41f94cc1c6..4338ca732c 100644
--- a/jsapp/js/components/modalForms/encryptForm.es6
+++ b/jsapp/js/components/modalForms/encryptForm.es6
@@ -162,7 +162,7 @@ class EncryptForm extends React.Component {
 
           <Button
             type='full'
-            color='dark-red'
+            color='red'
             size='l'
             isDisabled={this.state.isPending}
             onClick={this.onRemove.bind(this)}
diff --git a/jsapp/js/components/modalForms/formMedia.es6 b/jsapp/js/components/modalForms/formMedia.es6
index 5cd0ee4d3d..2575dbafcf 100644
--- a/jsapp/js/components/modalForms/formMedia.es6
+++ b/jsapp/js/components/modalForms/formMedia.es6
@@ -317,7 +317,7 @@ class FormMedia extends React.Component {
 
                   <Button
                     type='frame'
-                    color='dark-red'
+                    color='red'
                     size='m'
                     startIcon='trash'
                     onClick={(evt) => this.onDeleteMedia(evt, item.url)}
diff --git a/jsapp/js/components/modalForms/formMedia.scss b/jsapp/js/components/modalForms/formMedia.scss
index d376ade505..01afcbd754 100644
--- a/jsapp/js/components/modalForms/formMedia.scss
+++ b/jsapp/js/components/modalForms/formMedia.scss
@@ -26,14 +26,14 @@
       top: -2px;
       font-size: 24px;
       height: 24px;
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
       cursor: pointer;
     }
   }
 
   .form-media__upload {
     .form-media-upload-url {
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
       font-size: 18px;
       font-weight: 500;
       margin: auto;
@@ -74,14 +74,14 @@
     label.form-media__label {
       margin-bottom: 11px;
       padding-bottom: 16px;
-      border-bottom: 1px solid colors.$kobo-gray-92;
+      border-bottom: 1px solid colors.$kobo-gray-300;
     }
 
     .form-media__list-item {
       font-size: 16px;
       position: relative;
       padding-bottom: 12px;
-      border-bottom: 1px solid colors.$kobo-gray-92;
+      border-bottom: 1px solid colors.$kobo-gray-300;
       margin-bottom: 12px;
       display: flex;
       justify-content: space-between;
@@ -90,7 +90,7 @@
         position: absolute;
         left: -5px;
         top: 2px;
-        color: colors.$kobo-gray-65;
+        color: colors.$kobo-gray-500;
         font-size: 24px;
       }
 
@@ -113,7 +113,7 @@
   }
 
   .form-media__label {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
     font-weight: 500;
     font-size: 22px;
     display: block;
diff --git a/jsapp/js/components/modalForms/projectSettings.es6 b/jsapp/js/components/modalForms/projectSettings.es6
index 61dfbb947f..52e976ef1e 100644
--- a/jsapp/js/components/modalForms/projectSettings.es6
+++ b/jsapp/js/components/modalForms/projectSettings.es6
@@ -1063,7 +1063,7 @@ class ProjectSettings extends React.Component {
             <bem.FormModal__item>
               <Button
                 type='full'
-                color='dark-red'
+                color='red'
                 size='l'
                 label={t('Delete Project and Data')}
                 onClick={this.deleteProject}
diff --git a/jsapp/js/components/modalForms/translationSettings.es6 b/jsapp/js/components/modalForms/translationSettings.es6
index 2ff927e230..6fc0456e53 100644
--- a/jsapp/js/components/modalForms/translationSettings.es6
+++ b/jsapp/js/components/modalForms/translationSettings.es6
@@ -409,7 +409,7 @@ export class TranslationSettings extends React.Component {
                     {i !== 0 && (
                       <Button
                         type='bare'
-                        color='dark-red'
+                        color='red'
                         size='m'
                         onClick={() => {this.deleteLanguage(i);}}
                         isDisabled={
diff --git a/jsapp/js/components/modals/koboModal.scss b/jsapp/js/components/modals/koboModal.scss
index e3ab12c87e..e7b520acb2 100644
--- a/jsapp/js/components/modals/koboModal.scss
+++ b/jsapp/js/components/modals/koboModal.scss
@@ -23,7 +23,7 @@ $kobo-modal-header-icon-margin: sizes.$x10;
   left: 50%;
   top: 50%;
   background-color: colors.$kobo-white;
-  box-shadow: 0 0 sizes.$x12 0 color.change(colors.$kobo-gray-24, $alpha: 0.25);
+  box-shadow: 0 0 sizes.$x12 0 color.change(colors.$kobo-gray-800, $alpha: 0.25);
   display: flex;
   flex-direction: column;
 
@@ -67,10 +67,10 @@ $kobo-modal-header-icon-margin: sizes.$x10;
   border-radius: sizes.$x6 sizes.$x6 0 0;
 
   &.kobo-modal__header--red {
-    background-color: color.change(colors.$kobo-red, $alpha: 0.1);
+    background-color: color.change(colors.$kobo-mid-red, $alpha: 0.1);
   }
   &.kobo-modal__header--grey {
-    background-color: colors.$kobo-gray-98;
+    background-color: colors.$kobo-gray-100;
   }
   &.kobo-modal__header--white {
     background-color: colors.$kobo-white;
@@ -80,7 +80,7 @@ $kobo-modal-header-icon-margin: sizes.$x10;
     @include mixins.centerRowFlex;
 
     flex: 1;
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
     font-size: sizes.$x18;
     font-weight: 700;
     margin: 0;
diff --git a/jsapp/js/components/modals/koboModal.stories.tsx b/jsapp/js/components/modals/koboModal.stories.tsx
index 5f28aa8dac..1aafd3ce2b 100644
--- a/jsapp/js/components/modals/koboModal.stories.tsx
+++ b/jsapp/js/components/modals/koboModal.stories.tsx
@@ -61,7 +61,7 @@ const Template: ComponentStory<typeof KoboModal> = (args: any) => (
 
       <Button
         type='full'
-        color='dark-red'
+        color='red'
         size='m'
         onClick={() => {}}
         label={'some action that needs confirmation'}
@@ -73,7 +73,7 @@ const Template: ComponentStory<typeof KoboModal> = (args: any) => (
       onRequestClose={() => {}}
       title='Are you sure?'
       titleIcon='alert'
-      titleIconColor='red'
+      titleIconColor='mid-red'
       buttons={[
         {
           color: 'dark-blue',
@@ -81,7 +81,7 @@ const Template: ComponentStory<typeof KoboModal> = (args: any) => (
           onClick: () => {},
         },
         {
-          color: 'dark-red',
+          color: 'red',
           label: 'confirm',
           onClick: () => {},
         },
diff --git a/jsapp/js/components/modals/koboModalHeader.tsx b/jsapp/js/components/modals/koboModalHeader.tsx
index 2d306d2cae..82f78c4316 100644
--- a/jsapp/js/components/modals/koboModalHeader.tsx
+++ b/jsapp/js/components/modals/koboModalHeader.tsx
@@ -7,7 +7,7 @@ import Icon from 'jsapp/js/components/common/icon';
 bem.KoboModal__header = makeBem(bem.KoboModal, 'header', 'header');
 bem.KoboModal__headerIcon = makeBem(bem.KoboModal, 'header-icon', 'span');
 
-export type KoboModalHeaderIconColors = 'blue' | 'red' | 'storm';
+export type KoboModalHeaderIconColors = 'blue' | 'mid-red' | 'storm';
 export type KoboModalHeaderBackgroundColors = 'red' | 'grey' | 'white';
 
 interface KoboModalHeaderProps {
diff --git a/jsapp/js/components/modals/koboPrompt.tsx b/jsapp/js/components/modals/koboPrompt.tsx
index e47196fa0a..0f4298aa3e 100644
--- a/jsapp/js/components/modals/koboPrompt.tsx
+++ b/jsapp/js/components/modals/koboPrompt.tsx
@@ -36,7 +36,7 @@ interface KoboPromptProps {
   /** Optional icon displayed on the left of the title. */
   titleIcon?: IconName;
   /** Color of the optional icon. */
-  titleIconColor?: 'blue' | 'red';
+  titleIconColor?: 'blue' | 'mid-red';
   /** The content of the propmt; pass a string or a more complex JSX. */
   children?: React.ReactNode;
   /** A list of buttons to be displayed on the bottom right of the prompt. */
diff --git a/jsapp/js/components/passwordStrength.module.scss b/jsapp/js/components/passwordStrength.module.scss
index e9b33c7dc3..30a4af9871 100644
--- a/jsapp/js/components/passwordStrength.module.scss
+++ b/jsapp/js/components/passwordStrength.module.scss
@@ -15,7 +15,7 @@
   width: 100%;
   height: sizes.$x5;
   position: relative;
-  box-shadow: inset 0 0 0 sizes.$x1 colors.$kobo-gray-65;
+  box-shadow: inset 0 0 0 sizes.$x1 colors.$kobo-gray-500;
 
   .indicator {
     background: transparent;
@@ -29,14 +29,14 @@
   &[data-password-score='0'] {
     .indicator {
       width: 1%;
-      background-color: colors.$kobo-red;
+      background-color: colors.$kobo-mid-red;
     }
   }
 
   &[data-password-score='1'] {
     .indicator {
       width: 25%;
-      background-color: colors.$kobo-red;
+      background-color: colors.$kobo-mid-red;
     }
   }
 
@@ -64,7 +64,7 @@
 
 .message {
   &.messageWarning {
-    color: colors.$kobo-red;
+    color: colors.$kobo-mid-red;
   }
 }
 
diff --git a/jsapp/js/components/permissions/sharingForm.scss b/jsapp/js/components/permissions/sharingForm.scss
index 4edd06e6a7..231d8af68d 100644
--- a/jsapp/js/components/permissions/sharingForm.scss
+++ b/jsapp/js/components/permissions/sharingForm.scss
@@ -11,7 +11,7 @@ $s-gray-row-spacing: 10px;
   h2 {
     margin: 0;
     font-size: variables.$base-font-size;
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
     font-weight: 500;
   }
 
@@ -71,7 +71,7 @@ $s-gray-row-spacing: 10px;
 }
 
 .user-row {
-  border-bottom: 1px solid colors.$kobo-gray-92;
+  border-bottom: 1px solid colors.$kobo-gray-300;
   padding-bottom: 5px;
   padding-top: 5px;
 
@@ -153,7 +153,7 @@ $s-gray-row-spacing: 10px;
 
 .user-row__editor,
 .form-modal__item--gray-row {
-  background: colors.$kobo-gray-96;
+  background: colors.$kobo-gray-200;
   padding: 15px;
 }
 
diff --git a/jsapp/js/components/permissions/transferProjects/transferProjects.component.tsx b/jsapp/js/components/permissions/transferProjects/transferProjects.component.tsx
index 6aff9fbad0..df11dd1f86 100644
--- a/jsapp/js/components/permissions/transferProjects/transferProjects.component.tsx
+++ b/jsapp/js/components/permissions/transferProjects/transferProjects.component.tsx
@@ -169,7 +169,7 @@ export default function TransferProjects(props: TransferProjectsProps) {
               label={t('Cancel transfer')}
               isFullWidth
               onClick={cancelCurrentInvite}
-              color='dark-red'
+              color='red'
               type='frame'
               size='l'
             />
diff --git a/jsapp/js/components/permissions/transferProjects/transferProjects.module.scss b/jsapp/js/components/permissions/transferProjects/transferProjects.module.scss
index 4819c3ecc6..35133f3be2 100644
--- a/jsapp/js/components/permissions/transferProjects/transferProjects.module.scss
+++ b/jsapp/js/components/permissions/transferProjects/transferProjects.module.scss
@@ -6,7 +6,7 @@
   background: colors.$kobo-white;
   padding: sizes.$x20;
   margin: sizes.$x24 sizes.$x40;
-  border: 1px solid colors.$kobo-gray-92;
+  border: 1px solid colors.$kobo-gray-300;
   border-radius: sizes.$x5;
 }
 
diff --git a/jsapp/js/components/permissions/userPermissionRow.component.tsx b/jsapp/js/components/permissions/userPermissionRow.component.tsx
index a662522182..bb6be083a0 100644
--- a/jsapp/js/components/permissions/userPermissionRow.component.tsx
+++ b/jsapp/js/components/permissions/userPermissionRow.component.tsx
@@ -180,7 +180,7 @@ export default class UserPermissionRow extends React.Component<
 
                   <Button
                     type='bare'
-                    color='dark-red'
+                    color='red'
                     size='m'
                     startIcon='trash'
                     onClick={this.showRemovePermissionsPrompt.bind(this)}
diff --git a/jsapp/js/components/processing/analysis/analysisContentEmpty.module.scss b/jsapp/js/components/processing/analysis/analysisContentEmpty.module.scss
index d0b061a9ec..bfdbf3b313 100644
--- a/jsapp/js/components/processing/analysis/analysisContentEmpty.module.scss
+++ b/jsapp/js/components/processing/analysis/analysisContentEmpty.module.scss
@@ -6,5 +6,5 @@
 }
 
 .lockIcon {
-  color: colors.$kobo-gray-85;
+  color: colors.$kobo-gray-400;
 }
diff --git a/jsapp/js/components/processing/analysis/analysisHeader.module.scss b/jsapp/js/components/processing/analysis/analysisHeader.module.scss
index fee6be47ef..a61cca887e 100644
--- a/jsapp/js/components/processing/analysis/analysisHeader.module.scss
+++ b/jsapp/js/components/processing/analysis/analysisHeader.module.scss
@@ -42,14 +42,14 @@ $menu-padding: koboSelect.$k-select-menu-padding;
   justify-content: space-between;
   width: 100%;
   height: $option-height;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   padding: 0 #{sizes.$x16 - sizes.$x2};
   text-align: initial;
   font-weight: 500;
 
   &:hover {
-    color: colors.$kobo-gray-24;
-    background-color: colors.$kobo-gray-96;
+    color: colors.$kobo-gray-800;
+    background-color: colors.$kobo-gray-200;
   }
 
   :global .k-icon {
@@ -74,7 +74,7 @@ $menu-padding: koboSelect.$k-select-menu-padding;
 
 .addQuestionMenu :global h2 {
   text-align: initial;
-  border-top: sizes.$x1 solid colors.$kobo-gray-92;
+  border-top: sizes.$x1 solid colors.$kobo-gray-300;
   font-size: sizes.$x12;
   line-height: $option-height;
   padding: 0;
diff --git a/jsapp/js/components/processing/analysis/editors/selectXFieldsEditor.component.tsx b/jsapp/js/components/processing/analysis/editors/selectXFieldsEditor.component.tsx
index eee274d4dc..fa60f3c91c 100644
--- a/jsapp/js/components/processing/analysis/editors/selectXFieldsEditor.component.tsx
+++ b/jsapp/js/components/processing/analysis/editors/selectXFieldsEditor.component.tsx
@@ -113,7 +113,7 @@ export default function SelectXFieldsEditor(props: SelectXFieldsEditorProps) {
 
           <Button
             type='bare'
-            color='dark-red'
+            color='red'
             size='m'
             startIcon='trash'
             onClick={() => deleteChoice(choice.uuid)}
diff --git a/jsapp/js/components/processing/analysis/list/analysisQuestionRow.module.scss b/jsapp/js/components/processing/analysis/list/analysisQuestionRow.module.scss
index 3ebdd7c7c7..48609a9613 100644
--- a/jsapp/js/components/processing/analysis/list/analysisQuestionRow.module.scss
+++ b/jsapp/js/components/processing/analysis/list/analysisQuestionRow.module.scss
@@ -24,14 +24,14 @@
 }
 
 .dragHandle {
-  color: colors.$kobo-gray-65;
+  color: colors.$kobo-gray-500;
   width: analysisVariables.$icon-size;
   line-height: analysisVariables.$icon-size;
   cursor: move;
   position: relative;
 
   &:hover {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
   }
 
   // We make the handle area bigger by adding this invisible element
diff --git a/jsapp/js/components/processing/analysis/responseForms/common.module.scss b/jsapp/js/components/processing/analysis/responseForms/common.module.scss
index 0e5aacc1b9..9ba3e12c0e 100644
--- a/jsapp/js/components/processing/analysis/responseForms/common.module.scss
+++ b/jsapp/js/components/processing/analysis/responseForms/common.module.scss
@@ -17,7 +17,7 @@ $label-left-position: analysisVariables.$icon-size +
 }
 
 .headerLabel {
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-size: sizes.$x16;
   font-weight: 600;
   flex: 1;
diff --git a/jsapp/js/components/processing/analysis/responseForms/commonHeader.component.tsx b/jsapp/js/components/processing/analysis/responseForms/commonHeader.component.tsx
index c5e6bb0290..6da54eeeed 100644
--- a/jsapp/js/components/processing/analysis/responseForms/commonHeader.component.tsx
+++ b/jsapp/js/components/processing/analysis/responseForms/commonHeader.component.tsx
@@ -113,7 +113,7 @@ export default function ResponseFormHeader(props: ResponseFormHeaderProps) {
           },
           {
             type: 'full',
-            color: 'dark-red',
+            color: 'red',
             label: t('Delete'),
             onClick: deleteQuestion,
           },
@@ -151,7 +151,7 @@ export default function ResponseFormHeader(props: ResponseFormHeaderProps) {
 
       <Button
         type='bare'
-        color='dark-red'
+        color='red'
         size='s'
         startIcon='trash'
         onClick={() => setIsDeletePromptOpen(true)}
diff --git a/jsapp/js/components/processing/analysis/responseForms/keywordSearchResponseForm.module.scss b/jsapp/js/components/processing/analysis/responseForms/keywordSearchResponseForm.module.scss
index 919cd76775..a2ba595e8a 100644
--- a/jsapp/js/components/processing/analysis/responseForms/keywordSearchResponseForm.module.scss
+++ b/jsapp/js/components/processing/analysis/responseForms/keywordSearchResponseForm.module.scss
@@ -12,7 +12,7 @@
 }
 
 .loading {
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 }
 
 .keywords {
diff --git a/jsapp/js/components/processing/processingActions.ts b/jsapp/js/components/processing/processingActions.ts
index 81d573b4dd..18266f5dad 100644
--- a/jsapp/js/components/processing/processingActions.ts
+++ b/jsapp/js/components/processing/processingActions.ts
@@ -370,8 +370,10 @@ processingActions.setTranscript.failed.listen(() => {
  * `deleteTranscript` action
  *
  * Use it to completely remove given transcript. Currently deleting transcript
- * means setting its value to a predefined DELETE_CHAR - Back end handles the
- * cleanup.
+ * means setting its value to a predefined DELETE_CHAR. Back end handles the
+ * cleanup - it removes the transcript, and if there is zero transcripts for
+ * given language for all the submissions, it also removes that language from
+ * `advanced_feature` (i.e. makes it "not enabled").
  */
 interface DeleteTranscriptFn {
   (assetUid: string, qpath: string, submissionEditId: string): void;
@@ -654,8 +656,10 @@ processingActions.setTranslation.failed.listen(() => {
  * `deleteTranslation` action
  *
  * Use it to completely remove given translation. Currently deleting translation
- * means setting its value to a predefined DELETE_CHAR - Back end handles the
- * cleanup.
+ * means setting its value to a predefined DELETE_CHAR. Back end handles the
+ * cleanup - it removes the translation, and if there is zero translations for
+ * given language for all the submissions, it also removes that language from
+ * `advanced_feature` (i.e. makes it "not enabled").
  */
 interface DeleteTranslationFn {
   (
diff --git a/jsapp/js/components/processing/processingBody.module.scss b/jsapp/js/components/processing/processingBody.module.scss
index f2eeabe5b0..fe0a2b404b 100644
--- a/jsapp/js/components/processing/processingBody.module.scss
+++ b/jsapp/js/components/processing/processingBody.module.scss
@@ -69,7 +69,7 @@
 
 .text {
   white-space: pre-wrap;
-  border-top: sizes.$x2 solid colors.$kobo-gray-96;
+  border-top: sizes.$x2 solid colors.$kobo-gray-200;
   padding-top: sizes.$x16;
   width: 100%;
   overflow-y: auto;
@@ -77,7 +77,7 @@
 }
 
 .textarea {
-  border: sizes.$x2 solid colors.$kobo-gray-96;
+  border: sizes.$x2 solid colors.$kobo-gray-200;
   border-radius: sizes.$x6;
   padding: sizes.$x16;
   resize: none;
diff --git a/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.module.scss b/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.module.scss
index f3ce78a774..3a78b273f5 100644
--- a/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.module.scss
+++ b/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.module.scss
@@ -39,7 +39,7 @@ ul.options.options {
   padding: sizes.$x12;
   margin-top: sizes.$x6;
   max-height: sizes.$x140; // ~4.5 times the size of a checkbox, makes 4 checkboxes visible
-  border: 1px solid colors.$kobo-gray-92;
+  border: 1px solid colors.$kobo-gray-300;
   border-radius: sizes.$x2;
   overflow-y: auto;
 }
diff --git a/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.tsx b/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.tsx
index a3e8aed478..952881d95e 100644
--- a/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.tsx
+++ b/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.tsx
@@ -263,7 +263,7 @@ export default function SidebarDisplaySettings() {
           <Button
             label={t('Reset')}
             type='frame'
-            color='dark-red'
+            color='red'
             size='m'
             onClick={() => {
               store.resetDisplays(activeTab);
diff --git a/jsapp/js/components/processing/sidebar/sidebarSubmissionData.module.scss b/jsapp/js/components/processing/sidebar/sidebarSubmissionData.module.scss
index 810db20a21..495915493e 100644
--- a/jsapp/js/components/processing/sidebar/sidebarSubmissionData.module.scss
+++ b/jsapp/js/components/processing/sidebar/sidebarSubmissionData.module.scss
@@ -4,7 +4,7 @@
 .dataList {
   flex: 1;
   padding: sizes.$x12;
-  border: sizes.$x1 solid colors.$kobo-gray-85;
+  border: sizes.$x1 solid colors.$kobo-gray-400;
   border-radius: sizes.$x6;
 }
 
diff --git a/jsapp/js/components/processing/singleProcessingContent.module.scss b/jsapp/js/components/processing/singleProcessingContent.module.scss
index 2d153df17a..c49ed65c7d 100644
--- a/jsapp/js/components/processing/singleProcessingContent.module.scss
+++ b/jsapp/js/components/processing/singleProcessingContent.module.scss
@@ -21,7 +21,7 @@
 
 .tab {
   cursor: pointer;
-  color: colors.$kobo-gray-55;
+  color: colors.$kobo-gray-600;
   position: relative;
   font-weight: 900;
   font-size: sizes.$x14;
@@ -30,7 +30,7 @@
   border-radius: sizes.$x6 sizes.$x6 0 0;
 
   &:hover {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
   }
 
   &:active:not(.activeTab) {
@@ -49,7 +49,7 @@
   }
 
   &.activeTab {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
     background-color: colors.$kobo-white;
 
     &::after {
diff --git a/jsapp/js/components/processing/singleProcessingHeader.module.scss b/jsapp/js/components/processing/singleProcessingHeader.module.scss
index 59d40a4182..3fcc4d063c 100644
--- a/jsapp/js/components/processing/singleProcessingHeader.module.scss
+++ b/jsapp/js/components/processing/singleProcessingHeader.module.scss
@@ -6,7 +6,7 @@
 .root {
   @include mixins.centerRowFlex;
   height: 100%;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
   gap: 10px;
   min-height: 60px;
 }
diff --git a/jsapp/js/components/processing/translations/stepSingleViewer.component.tsx b/jsapp/js/components/processing/translations/stepSingleViewer.component.tsx
index 91fa18ef51..311d8bf9e0 100644
--- a/jsapp/js/components/processing/translations/stepSingleViewer.component.tsx
+++ b/jsapp/js/components/processing/translations/stepSingleViewer.component.tsx
@@ -94,7 +94,7 @@ export default function StepSingleViewer(props: StepSingleViewerProps) {
 
           <Button
             type='bare'
-            color='dark-red'
+            color='red'
             size='s'
             startIcon='trash'
             onClick={deleteTranslation}
diff --git a/jsapp/js/components/projectDownloads/projectExportsCreator.es6 b/jsapp/js/components/projectDownloads/projectExportsCreator.es6
index bbd50758bd..5cc0e42004 100644
--- a/jsapp/js/components/projectDownloads/projectExportsCreator.es6
+++ b/jsapp/js/components/projectDownloads/projectExportsCreator.es6
@@ -786,7 +786,7 @@ export default class ProjectExportsCreator extends React.Component {
                     userCan(PERMISSIONS_CODENAMES.manage_asset, this.props.asset) &&
                       <Button
                         type='bare'
-                        color='dark-red'
+                        color='red'
                         size='m'
                         onClick={this.onDeleteExportSetting.bind(
                           this,
diff --git a/jsapp/js/components/projectDownloads/projectExportsList.es6 b/jsapp/js/components/projectDownloads/projectExportsList.es6
index 9e903ac8b0..70d5b061d7 100644
--- a/jsapp/js/components/projectDownloads/projectExportsList.es6
+++ b/jsapp/js/components/projectDownloads/projectExportsList.es6
@@ -239,7 +239,7 @@ export default class ProjectExportsList extends React.Component {
           {userCan(PERMISSIONS_CODENAMES.view_submissions, this.props.asset) &&
             <Button
               type='frame'
-              color='dark-red'
+              color='red'
               size='m'
               startIcon='trash'
               onClick={this.deleteExport.bind(this, exportData.uid)}
diff --git a/jsapp/js/components/reports/chartTypePicker.module.scss b/jsapp/js/components/reports/chartTypePicker.module.scss
index 497eff46c1..804af9ab6f 100644
--- a/jsapp/js/components/reports/chartTypePicker.module.scss
+++ b/jsapp/js/components/reports/chartTypePicker.module.scss
@@ -73,5 +73,5 @@
 }
 
 .styleInput:not(:checked):hover + .styleLabel {
-  border-color: colors.$kobo-gray-85;
+  border-color: colors.$kobo-gray-400;
 }
diff --git a/jsapp/js/components/reports/customReportForm.es6 b/jsapp/js/components/reports/customReportForm.es6
index ddcf6dd9f1..9bf79bdcaf 100644
--- a/jsapp/js/components/reports/customReportForm.es6
+++ b/jsapp/js/components/reports/customReportForm.es6
@@ -82,7 +82,7 @@ export default class CustomReportForm extends React.Component {
           {this.props.asset.report_custom[crid] && (
             <Button
               type='full'
-              color='dark-red'
+              color='red'
               size='l'
               onClick={this.deleteCustomReport.bind(this)}
               label={t('Delete')}
diff --git a/jsapp/js/components/reports/questionGraphSettings.es6 b/jsapp/js/components/reports/questionGraphSettings.es6
index d960237f08..78a9705009 100644
--- a/jsapp/js/components/reports/questionGraphSettings.es6
+++ b/jsapp/js/components/reports/questionGraphSettings.es6
@@ -138,7 +138,7 @@ export default class QuestionGraphSettings extends React.Component {
             reportStyle.width) && (
             <Button
               type='full'
-              color='dark-red'
+              color='red'
               size='l'
               onClick={this.saveQS.bind(this, true)}
               label={t('Reset')}
diff --git a/jsapp/js/components/reports/reports.scss b/jsapp/js/components/reports/reports.scss
index 147bca830e..278721722c 100644
--- a/jsapp/js/components/reports/reports.scss
+++ b/jsapp/js/components/reports/reports.scss
@@ -18,7 +18,7 @@
 }
 
 .report-view__item {
-  border: sizes.$x1 solid colors.$kobo-gray-92;
+  border: sizes.$x1 solid colors.$kobo-gray-300;
   margin: sizes.$x15 0;
   background: colors.$kobo-white;
 }
@@ -26,7 +26,7 @@
 .report-view__itemHeading {
   padding: sizes.$x10 sizes.$x24;
   border-left: sizes.$x5 solid colors.$kobo-teal;
-  border-bottom: sizes.$x1 solid colors.$kobo-gray-92;
+  border-bottom: sizes.$x1 solid colors.$kobo-gray-300;
   position: relative;
 
   h2 {
@@ -69,7 +69,7 @@
     thead th {
       margin: 0;
       padding: sizes.$x8;
-      background-color: colors.$kobo-gray-40;
+      background-color: colors.$kobo-gray-700;
       color: colors.$kobo-white;
       text-align: right;
       font-weight: normal;
@@ -81,7 +81,7 @@
     }
 
     tbody tr td {
-      border-bottom: sizes.$x1 solid colors.$kobo-gray-65;
+      border-bottom: sizes.$x1 solid colors.$kobo-gray-500;
       padding: sizes.$x8;
       text-align: right;
 
@@ -140,7 +140,7 @@
     margin-bottom: sizes.$x20;
     display: block;
     font-weight: 400;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
   }
 }
 
@@ -168,7 +168,7 @@
   }
 
   input:not(:checked):hover + label {
-    border-color: colors.$kobo-gray-85;
+    border-color: colors.$kobo-gray-400;
   }
 
   &--vertical {
diff --git a/jsapp/js/components/special/koboAccessibleSelect.module.scss b/jsapp/js/components/special/koboAccessibleSelect.module.scss
index 15fda6544d..b7f0d30658 100644
--- a/jsapp/js/components/special/koboAccessibleSelect.module.scss
+++ b/jsapp/js/components/special/koboAccessibleSelect.module.scss
@@ -9,7 +9,7 @@
 //     koboSelect.scss
 //     textBox.module.scss
 
-$input-color: colors.$kobo-gray-24;
+$input-color: colors.$kobo-gray-800;
 
 .root {
   width: 100%;
@@ -37,7 +37,7 @@ $input-color: colors.$kobo-gray-24;
   color: $input-color;
   border-style: solid;
   border-width: sizes.$x1;
-  border-color: colors.$kobo-gray-92;
+  border-color: colors.$kobo-gray-300;
   border-radius: sizes.$x6;
   background-color: colors.$kobo-white;
 
@@ -46,7 +46,7 @@ $input-color: colors.$kobo-gray-24;
   transition: outline-width 20ms, border-color 20ms;
 
   &:hover {
-    border-color: colors.$kobo-gray-85;
+    border-color: colors.$kobo-gray-400;
   }
 
   &:focus {
@@ -62,14 +62,14 @@ $input-color: colors.$kobo-gray-24;
   }
 
   &.hasError {
-    border-color: colors.$kobo-red;
-    &:hover {border-color: colors.$kobo-dark-red;}
+    border-color: colors.$kobo-mid-red;
+    &:hover {border-color: colors.$kobo-red;}
     &:focus {border-color: colors.$kobo-dark-blue;}
   }
 
   :global .k-icon {
-    color: colors.$kobo-gray-55; // chosen for balance
-    // color: colors.$kobo-gray-85; // - old design with caret triangle
+    color: colors.$kobo-gray-600; // chosen for balance
+    // color: colors.$kobo-gray-400; // - old design with caret triangle
   }
 
   &[aria-expanded='true'] {
@@ -80,7 +80,7 @@ $input-color: colors.$kobo-gray-24;
   }
 
   &.placeholding {
-    color: colors.$kobo-gray-55;
+    color: colors.$kobo-gray-600;
   }
 
   &button {
@@ -122,7 +122,7 @@ $k-select-menu-padding: sizes.$x6;
 // Menu option
 .option {
   background: colors.$kobo-white;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
 
   min-height: $k-select-option-height;
 
@@ -131,9 +131,9 @@ $k-select-menu-padding: sizes.$x6;
   text-indent: 0 - sizes.$x4;
 
   &.selected {
-    // background: colors.$kobo-gray-96; // prior design
+    // background: colors.$kobo-gray-200; // prior design
     background: colors.$kobo-light-blue; // a11y: adds contrast for keyboard use
-    color: colors.$kobo-gray-14;
+    color: colors.$kobo-gray-900;
     border-radius: 2px;
   }
 }
@@ -144,7 +144,7 @@ $k-select-menu-padding: sizes.$x6;
   line-height: textBox.$label-leading;
   margin-bottom: textBox.$label-margin;
   &.label.label { // selector specificity-fighting with kobo bem
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 }
 
diff --git a/jsapp/js/components/submissions/audioCell.tsx b/jsapp/js/components/submissions/audioCell.tsx
index 466d15456b..dea417e925 100644
--- a/jsapp/js/components/submissions/audioCell.tsx
+++ b/jsapp/js/components/submissions/audioCell.tsx
@@ -27,7 +27,7 @@ export default function AudioCell(props: AudioCellProps) {
     <bem.AudioCell>
       {typeof props.mediaAttachment === 'string' && (
         <span data-tip={props.mediaAttachment}>
-          <Icon name='alert' color='red' size='s' />
+          <Icon name='alert' color='mid-red' size='s' />
         </span>
       )}
 
diff --git a/jsapp/js/components/submissions/columnsHideDropdown.scss b/jsapp/js/components/submissions/columnsHideDropdown.scss
index 2908611026..477c6e193b 100644
--- a/jsapp/js/components/submissions/columnsHideDropdown.scss
+++ b/jsapp/js/components/submissions/columnsHideDropdown.scss
@@ -9,7 +9,7 @@
   margin-right: 20px;
 
   .kobo-dropdown__menu {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     background-color: colors.$kobo-white;
     @include mdl.box-shadow;
     padding: 9px 0;
@@ -27,7 +27,7 @@
     margin: 0;
     font-size: 12px;
     line-height: 18px;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
 
     &:not(:first-child) {
       margin-top: 10px;
diff --git a/jsapp/js/components/submissions/columnsHideForm.tsx b/jsapp/js/components/submissions/columnsHideForm.tsx
index 99735f75c1..ca211b8e78 100644
--- a/jsapp/js/components/submissions/columnsHideForm.tsx
+++ b/jsapp/js/components/submissions/columnsHideForm.tsx
@@ -182,7 +182,7 @@ class ColumnsHideForm extends React.Component<
         <bem.ColumnsHideForm__footer>
           <Button
             type='frame'
-            color='dark-red'
+            color='red'
             size='s'
             isFullWidth
             onClick={this.onReset.bind(this)}
diff --git a/jsapp/js/components/submissions/mediaCell.scss b/jsapp/js/components/submissions/mediaCell.scss
index 1309540100..2a79734c59 100644
--- a/jsapp/js/components/submissions/mediaCell.scss
+++ b/jsapp/js/components/submissions/mediaCell.scss
@@ -14,7 +14,7 @@
 
       &:hover {
         color: colors.$kobo-blue;
-        background-color: colors.$kobo-gray-92;
+        background-color: colors.$kobo-gray-300;
       }
     }
   }
diff --git a/jsapp/js/components/submissions/mediaCell.tsx b/jsapp/js/components/submissions/mediaCell.tsx
index 3fb505cd15..58e89eb9aa 100644
--- a/jsapp/js/components/submissions/mediaCell.tsx
+++ b/jsapp/js/components/submissions/mediaCell.tsx
@@ -141,7 +141,7 @@ class MediaCell extends React.Component<MediaCellProps, {}> {
       return (
         <bem.MediaCell>
           <bem.MediaCellIconWrapper data-tip={this.props.mediaAttachment}>
-            <Icon name='alert' color='red' size='s'/>
+            <Icon name='alert' color='mid-red' size='s'/>
           </bem.MediaCellIconWrapper>
         </bem.MediaCell>
       );
diff --git a/jsapp/js/components/submissions/submissionDataList.scss b/jsapp/js/components/submissions/submissionDataList.scss
index 509f4ba243..392f4f1efc 100644
--- a/jsapp/js/components/submissions/submissionDataList.scss
+++ b/jsapp/js/components/submissions/submissionDataList.scss
@@ -19,12 +19,12 @@
 .submission-data-list-question__label {
   font-weight: 600;
   font-size: 14px;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   margin: 0;
 }
 
 .submission-data-list-question__response {
   font-weight: 400;
   font-size: 16px;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
 }
diff --git a/jsapp/js/components/submissions/submissionDataTable.scss b/jsapp/js/components/submissions/submissionDataTable.scss
index abda158586..1cb62bee7a 100644
--- a/jsapp/js/components/submissions/submissionDataTable.scss
+++ b/jsapp/js/components/submissions/submissionDataTable.scss
@@ -14,22 +14,22 @@ $submission-data-table-space: sizes.$x12;
 }
 
 .submission-data-table__row {
-  background-color: colors.$kobo-gray-96;
+  background-color: colors.$kobo-gray-200;
 
   &.submission-data-table__row--type-group_root + &.submission-data-table__row--metadata {
-    border-top: sizes.$x3 solid colors.$kobo-gray-92;
+    border-top: sizes.$x3 solid colors.$kobo-gray-300;
   }
 
   &.submission-data-table__row--response,
   &.submission-data-table__row--group,
   &.submission-data-table__row--group-label {
-    border-bottom: sizes.$x1 solid colors.$kobo-gray-92;
+    border-bottom: sizes.$x1 solid colors.$kobo-gray-300;
   }
 
   &.submission-data-table__row--response,
   &.submission-data-table__row--group {
-    border-left: sizes.$x1 solid colors.$kobo-gray-92;
-    border-right: sizes.$x1 solid colors.$kobo-gray-92;
+    border-left: sizes.$x1 solid colors.$kobo-gray-300;
+    border-right: sizes.$x1 solid colors.$kobo-gray-300;
   }
 
   &.submission-data-table__row--columns {
@@ -38,7 +38,7 @@ $submission-data-table-space: sizes.$x12;
 
   &.submission-data-table__row--column-names {
     font-weight: bold;
-    background-color: colors.$kobo-gray-40;
+    background-color: colors.$kobo-gray-700;
     color: colors.$kobo-white;
   }
 
@@ -118,12 +118,12 @@ $submission-data-table-space: sizes.$x12;
   margin-left: 0.5em;
   font-size: 0.8em;
   line-height: 1;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-family: mdl.$font_mono;
 }
 
 .submission-data-table__value {
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
   display: inline-block;
   font-style: italic;
 }
diff --git a/jsapp/js/components/submissions/submissionModal.scss b/jsapp/js/components/submissions/submissionModal.scss
index 465c42a76f..e56fc39f3c 100644
--- a/jsapp/js/components/submissions/submissionModal.scss
+++ b/jsapp/js/components/submissions/submissionModal.scss
@@ -2,8 +2,8 @@
 
 .modal.modal-submission {
   .modal__header {
-    background-color: colors.$kobo-gray-96;
-    color: colors.$kobo-gray-24;
+    background-color: colors.$kobo-gray-200;
+    color: colors.$kobo-gray-800;
   }
 }
 
@@ -32,7 +32,7 @@
 .submission-modal-message-box {
   margin-bottom: 20px;
   padding: 20px;
-  background: colors.$kobo-gray-96;
+  background: colors.$kobo-gray-200;
   text-align: center;
   border-radius: 6px;
 
diff --git a/jsapp/js/components/submissions/submissionModal.tsx b/jsapp/js/components/submissions/submissionModal.tsx
index 2a503a1419..dbfe65753c 100644
--- a/jsapp/js/components/submissions/submissionModal.tsx
+++ b/jsapp/js/components/submissions/submissionModal.tsx
@@ -570,7 +570,7 @@ export default class SubmissionModal extends React.Component<
             )) && (
             <Button
               onClick={this.deleteSubmission.bind(this)}
-              color='dark-red'
+              color='red'
               type='full'
               size='l'
               isDisabled={!this.isSubmissionEditable()}
@@ -714,7 +714,7 @@ export default class SubmissionModal extends React.Component<
 
           <Button
             onClick={this.deleteSubmission.bind(this)}
-            color='dark-red'
+            color='red'
             type='bare'
             size='l'
             startIcon='trash'
diff --git a/jsapp/js/components/submissions/table.scss b/jsapp/js/components/submissions/table.scss
index 7b3ed7d661..c52f0e794a 100644
--- a/jsapp/js/components/submissions/table.scss
+++ b/jsapp/js/components/submissions/table.scss
@@ -7,9 +7,9 @@
 
 // These are custom styles for Table View table.
 
-$data-table-border: 1px solid colors.$kobo-gray-92;
+$data-table-border: 1px solid colors.$kobo-gray-300;
 $data-table-row-height: 36px;
-$c-header-bg: colors.$kobo-gray-96;
+$c-header-bg: colors.$kobo-gray-200;
 $s-data-table-font: 13px;
 
 .form-view__sidetabs + .form-view.form-view--table {
@@ -58,7 +58,7 @@ $s-data-table-font: 13px;
   .rt-table {
     border: $data-table-border;
     background-color: colors.$kobo-white;
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 
   // minimum body height so at least two rows are visible
@@ -89,7 +89,7 @@ $s-data-table-font: 13px;
 
       .k-icon {
         font-size: 20px;
-        color: colors.$kobo-gray-55;
+        color: colors.$kobo-gray-600;
         vertical-align: top;
         display: inline-block;
         // Needed for the RTL content to look nice
@@ -144,7 +144,7 @@ $s-data-table-font: 13px;
         font-size: 12px;
 
         &::placeholder {
-          color: colors.$kobo-gray-55;
+          color: colors.$kobo-gray-600;
         }
       }
 
@@ -196,7 +196,7 @@ $s-data-table-font: 13px;
         width: 100%;
         @include mixins.textEllipsis;
         font-size: 12px;
-        color: colors.$kobo-gray-40;
+        color: colors.$kobo-gray-700;
         text-align: initial;
       }
     }
@@ -273,7 +273,7 @@ $s-data-table-font: 13px;
       background: transparent;
       border: 0;
       padding: 0;
-      color: colors.$kobo-gray-55;
+      color: colors.$kobo-gray-600;
 
       &:hover {
         color: colors.$kobo-blue;
@@ -330,7 +330,7 @@ $s-data-table-font: 13px;
 
     input,
     select {
-      border: 1px solid colors.$kobo-gray-92;
+      border: 1px solid colors.$kobo-gray-300;
       background: colors.$kobo-white;
       height: 32px;
       padding: 5px 7px;
@@ -346,14 +346,14 @@ $s-data-table-font: 13px;
   }
 
   .-loading {
-    background: colors.$kobo-gray-96;
+    background: colors.$kobo-gray-200;
 
     .-loading-inner {
       display: block;
       text-align: center;
       font-size: 18px;
       opacity: 0.8;
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
 
       i {
         margin-right: 12px;
@@ -364,7 +364,7 @@ $s-data-table-font: 13px;
   }
 
   &.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {
-    background: colors.$kobo-gray-98;
+    background: colors.$kobo-gray-100;
 
     .rt-td.is-frozen {
       background-color: inherit;
diff --git a/jsapp/js/components/submissions/tableBulkOptions.tsx b/jsapp/js/components/submissions/tableBulkOptions.tsx
index 75244a5e1e..251cafb6a6 100644
--- a/jsapp/js/components/submissions/tableBulkOptions.tsx
+++ b/jsapp/js/components/submissions/tableBulkOptions.tsx
@@ -265,7 +265,7 @@ class TableBulkOptions extends React.Component<TableBulkOptionsProps> {
         {Object.keys(this.props.selectedRows).length > 0 && (userCan(PERMISSIONS_CODENAMES.delete_submissions, this.props.asset) || userCanPartially(PERMISSIONS_CODENAMES.delete_submissions, this.props.asset)) &&
           <Button
             type='frame'
-            color='dark-red'
+            color='red'
             size='s'
             onClick={this.onDelete.bind(this)}
             startIcon='trash'
diff --git a/jsapp/js/components/submissions/tableColumnSortDropdown.scss b/jsapp/js/components/submissions/tableColumnSortDropdown.scss
index da73781b87..cc121f351d 100644
--- a/jsapp/js/components/submissions/tableColumnSortDropdown.scss
+++ b/jsapp/js/components/submissions/tableColumnSortDropdown.scss
@@ -11,7 +11,7 @@
 
   .kobo-dropdown__menu {
     color: colors.$kobo-white;
-    background-color: colors.$kobo-gray-40;
+    background-color: colors.$kobo-gray-700;
     @include mdl.box-shadow;
     padding: sizes.$x8 0;
     text-align: initial;
@@ -19,7 +19,7 @@
     min-width: sizes.$x150;
 
     .sort-dropdown-menu-button:hover {
-      background-color: colors.$kobo-gray-24;
+      background-color: colors.$kobo-gray-800;
     }
   }
 
@@ -74,7 +74,7 @@
 
       &.sort-dropdown-menu-button--active {
         color: colors.$kobo-teal;
-        background-color: colors.$kobo-gray-24; // Assuming we are using `dark` option
+        background-color: colors.$kobo-gray-800; // Assuming we are using `dark` option
       }
     }
   }
diff --git a/jsapp/js/components/submissions/tableMediaPreview.scss b/jsapp/js/components/submissions/tableMediaPreview.scss
index 4998cf61e5..97cd620673 100644
--- a/jsapp/js/components/submissions/tableMediaPreview.scss
+++ b/jsapp/js/components/submissions/tableMediaPreview.scss
@@ -18,7 +18,7 @@
 
   i.k-icon-file-audio {
     font-size: 128px;
-    color: colors.$kobo-gray-92;
+    color: colors.$kobo-gray-300;
   }
 }
 
diff --git a/jsapp/js/components/submissions/tableSettings.es6 b/jsapp/js/components/submissions/tableSettings.es6
index 9182494509..4bc7f53443 100644
--- a/jsapp/js/components/submissions/tableSettings.es6
+++ b/jsapp/js/components/submissions/tableSettings.es6
@@ -120,7 +120,7 @@ class TableSettings extends React.Component {
           {userCan('change_asset', this.props.asset) &&
             <Button
               type='frame'
-              color='dark-red'
+              color='red'
               size='l'
               onClick={this.onReset.bind(this)}
               label={t('Reset')}
diff --git a/jsapp/js/components/submissions/tableSettings.scss b/jsapp/js/components/submissions/tableSettings.scss
index 3cbfbd63fe..6539857cf5 100644
--- a/jsapp/js/components/submissions/tableSettings.scss
+++ b/jsapp/js/components/submissions/tableSettings.scss
@@ -9,9 +9,9 @@
     margin-bottom: 20px;
 
     &--advanced-table-options {
-      border: 1px solid colors.$kobo-gray-92;
+      border: 1px solid colors.$kobo-gray-300;
       padding: 20px;
-      background: colors.$kobo-gray-96;
+      background: colors.$kobo-gray-200;
 
       .form-view__cell--note {
         padding-bottom: 20px;
@@ -34,7 +34,7 @@
   ul {
     max-height: 160px;
     overflow: auto;
-    border: 1px solid colors.$kobo-gray-92;
+    border: 1px solid colors.$kobo-gray-300;
     padding: 10px;
     background: colors.$kobo-white;
 
diff --git a/jsapp/js/components/submissions/validationStatusDropdown.scss b/jsapp/js/components/submissions/validationStatusDropdown.scss
index e85fd8a5fc..d4dc1d1d24 100644
--- a/jsapp/js/components/submissions/validationStatusDropdown.scss
+++ b/jsapp/js/components/submissions/validationStatusDropdown.scss
@@ -24,7 +24,7 @@
 
   .kobo-select__control {
     padding: 0;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     background: transparent;
     height: 28px;
     min-height: 28px;
@@ -46,7 +46,7 @@
     position: relative;
 
     &:hover {
-      background-color: colors.$kobo-gray-96;
+      background-color: colors.$kobo-gray-200;
     }
   }
 
@@ -127,7 +127,7 @@
     }
 
     &.kobo-select__option-badge--validation_status_not_approved {
-      color: colors.$kobo-dark-red;
+      color: colors.$kobo-red;
       background-color: colors.$kobo-light-red;
     }
 
diff --git a/jsapp/js/components/support/helpBubble.scss b/jsapp/js/components/support/helpBubble.scss
index c687f6bc74..2103767fb2 100644
--- a/jsapp/js/components/support/helpBubble.scss
+++ b/jsapp/js/components/support/helpBubble.scss
@@ -36,13 +36,13 @@ $s-help-bubble-row-spacing: 20px;
       top: 16px;
       left: 16px;
       font-size: 28px;
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
     }
   }
 
   .help-bubble__back,
   .help-bubble__close {
-    background-color: rgba(colors.$kobo-gray-40, 0.5);
+    background-color: rgba(colors.$kobo-gray-700, 0.5);
     color: colors.$kobo-white;
   }
 }
@@ -61,7 +61,7 @@ $s-help-bubble-row-spacing: 20px;
   width: 100%;
   display: block;
   font-weight: normal;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 
   // mimic .k-drawer__link
   border-left: 3px solid transparent;
@@ -92,7 +92,7 @@ $s-help-bubble-row-spacing: 20px;
   border-color: variables.$drawer-background;
   top: 2px;
   border-width: 0 0 2px 2px;
-  background: colors.$kobo-red;
+  background: colors.$kobo-mid-red;
   border-radius: 50%;
   font-size: 10px;
   line-height: 1.3;
@@ -143,7 +143,7 @@ $s-help-bubble-row-spacing: 20px;
   border-radius: 50%;
   padding: 5px;
   background-color: rgba(colors.$kobo-white, 0.5);
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   line-height: 1;
   font-size: 1.5rem;
 
@@ -178,7 +178,7 @@ $s-help-bubble-row-spacing: 20px;
   display: block;
 
   & + & {
-    border-top: 1px solid colors.$kobo-gray-92;
+    border-top: 1px solid colors.$kobo-gray-300;
   }
 }
 
@@ -202,11 +202,11 @@ $s-help-bubble-row-spacing: 20px;
 
 .help-bubble__row.help-bubble__row--message-title {
   margin-top: 40px;
-  border-top: 1px solid colors.$kobo-gray-92;
+  border-top: 1px solid colors.$kobo-gray-300;
 }
 
 .help-bubble__row.help-bubble__row--header {
-  background-color: colors.$kobo-gray-40;
+  background-color: colors.$kobo-gray-700;
   color: colors.$kobo-white;
   font-size: 1.25rem;
 }
@@ -214,7 +214,7 @@ $s-help-bubble-row-spacing: 20px;
 .help-bubble__row.help-bubble__row--link,
 .help-bubble__row.help-bubble__row--message-clickable {
   cursor: pointer;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 
   &:hover {
     color: colors.$kobo-blue;
@@ -230,7 +230,7 @@ $s-help-bubble-row-spacing: 20px;
 }
 
 .help-bubble__row.help-bubble__row--message-clickable.help-bubble__row--message-unread {
-  border-left: 5px solid colors.$kobo-red;
+  border-left: 5px solid colors.$kobo-mid-red;
   padding-left: $s-help-bubble-row-spacing - 5px;
 
   &:hover {
diff --git a/jsapp/js/components/templatesList.scss b/jsapp/js/components/templatesList.scss
index a96aeaba5b..74407a1ec1 100644
--- a/jsapp/js/components/templatesList.scss
+++ b/jsapp/js/components/templatesList.scss
@@ -16,7 +16,7 @@
 
   .templates-list__row {
     display: flex;
-    box-shadow: 0 0 0 1px colors.$kobo-gray-92;
+    box-shadow: 0 0 0 1px colors.$kobo-gray-300;
     padding: 10px;
     align-items: center;
 
@@ -49,11 +49,11 @@
   .templates-list__template {
     font-size: inherit;
     position: relative;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     border: 1px solid transparent;
 
     &:hover, &.selected {
-      background: rgba(colors.$kobo-gray-92, 0.3);
+      background: rgba(colors.$kobo-gray-300, 0.3);
       color: colors.$kobo-blue;
     }
 
diff --git a/jsapp/js/components/usageLimits/overLimitBanner.component.tsx b/jsapp/js/components/usageLimits/overLimitBanner.component.tsx
index 3bdd926e22..741a4fe5a9 100644
--- a/jsapp/js/components/usageLimits/overLimitBanner.component.tsx
+++ b/jsapp/js/components/usageLimits/overLimitBanner.component.tsx
@@ -25,7 +25,7 @@ const OverLimitBanner = (props: OverLimitBannerProps) => {
         [styles.accountPage]: props.accountPage,
       })}
     >
-      <Icon name={'alert'} size='m' color={props.warning ? 'amber' : 'red'} />
+      <Icon name={'alert'} size='m' color={props.warning ? 'amber' : 'mid-red'} />
       <div className={styles.bannerContent}>
         {props.warning
           ? t('You are approaching your')
diff --git a/jsapp/js/popoverMenu.scss b/jsapp/js/popoverMenu.scss
index 0e51370c83..7577c27a41 100644
--- a/jsapp/js/popoverMenu.scss
+++ b/jsapp/js/popoverMenu.scss
@@ -16,7 +16,7 @@
   margin: 0;
   padding: 0;
   cursor: pointer;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   display: inline-block;
   vertical-align: middle;
 
@@ -92,7 +92,7 @@
   }
 
   &:hover {
-    background-color: colors.$kobo-gray-96;
+    background-color: colors.$kobo-gray-200;
     color: color.adjust(colors.$kobo-dark-blue, $lightness: -5%);
   }
 
@@ -101,7 +101,7 @@
   }
 
   &.divider {
-    border-top: 1px solid colors.$kobo-gray-92;
+    border-top: 1px solid colors.$kobo-gray-300;
   }
 }
 
@@ -109,12 +109,12 @@
   max-height: 120px;
   overflow: auto;
   overflow-x: hidden;
-  background-color: colors.$kobo-gray-96;
-  border-bottom: 1px solid colors.$kobo-gray-92;
+  background-color: colors.$kobo-gray-200;
+  border-bottom: 1px solid colors.$kobo-gray-300;
 }
 
 .popover-menu__item--move-coll-item {
-  background-color: colors.$kobo-gray-96;
+  background-color: colors.$kobo-gray-200;
   position: relative;
   text-align: initial;
   padding: 3px 8px 3px 5px;
@@ -130,15 +130,15 @@
   &.popover-menu__item--move-coll-item-parent {
     pointer-events: none;
     font-weight: 700;
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 }
 
 .popover-menu__heading {
   padding: 8px 15px;
-  color: colors.$kobo-gray-24;
-  border-top: 1px solid colors.$kobo-gray-92;
-  background-color: colors.$kobo-gray-96;
+  color: colors.$kobo-gray-800;
+  border-top: 1px solid colors.$kobo-gray-300;
+  background-color: colors.$kobo-gray-200;
   margin: 0px;
 }
 
@@ -198,7 +198,7 @@
       max-width: 100%;
       white-space: normal;
       padding: 12px;
-      border-bottom: 1px solid colors.$kobo-gray-92;
+      border-bottom: 1px solid colors.$kobo-gray-300;
       border-left: 2px solid transparent;
 
       &:last-child {
@@ -207,7 +207,7 @@
 
       .collect-data-label {
         font-weight: 600;
-        color: colors.$kobo-gray-24;
+        color: colors.$kobo-gray-800;
       }
 
       .collect-data-desc {
@@ -223,7 +223,7 @@
 }
 
 .popover-menu__link.popover-menu__link--red {
-  color: colors.$kobo-dark-red;
+  color: colors.$kobo-red;
 }
 
 @media screen and (max-height: 475px) {
diff --git a/jsapp/js/project/projectTopTabs.module.scss b/jsapp/js/project/projectTopTabs.module.scss
index e961fd536a..da0f76cba5 100644
--- a/jsapp/js/project/projectTopTabs.module.scss
+++ b/jsapp/js/project/projectTopTabs.module.scss
@@ -13,7 +13,7 @@
 
 .tabs {
   background: colors.$kobo-white;
-  border-bottom: sizes.$x1 solid colors.$kobo-gray-92;
+  border-bottom: sizes.$x1 solid colors.$kobo-gray-300;
   text-align: center;
   height: sizes.$x48;
   position: relative;
@@ -31,12 +31,12 @@
   line-height: sizes.$x48;
   cursor: pointer;
   position: relative;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-weight: normal;
 
   &:hover,
   &.active {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 
   &.active {
diff --git a/jsapp/js/project/submissionsCountGraph.module.scss b/jsapp/js/project/submissionsCountGraph.module.scss
index f472b85306..00dc6c4128 100644
--- a/jsapp/js/project/submissionsCountGraph.module.scss
+++ b/jsapp/js/project/submissionsCountGraph.module.scss
@@ -73,7 +73,7 @@
 
 .stats {
   flex: 1;
-  border: sizes.$x1 solid colors.$kobo-gray-92;
+  border: sizes.$x1 solid colors.$kobo-gray-300;
   padding: sizes.$x20;
 }
 
diff --git a/jsapp/js/projects/projectViews/projectsFieldsSelector.tsx b/jsapp/js/projects/projectViews/projectsFieldsSelector.tsx
index c9cddc40a0..5cde08db0b 100644
--- a/jsapp/js/projects/projectViews/projectsFieldsSelector.tsx
+++ b/jsapp/js/projects/projectViews/projectsFieldsSelector.tsx
@@ -124,7 +124,7 @@ export default function ProjectsFieldsSelector(
         <KoboModalFooter>
           <Button
             type='frame'
-            color='dark-red'
+            color='red'
             size='m'
             onClick={resetFields}
             label={t('Reset')}
diff --git a/jsapp/js/projects/projectViews/projectsFilter.tsx b/jsapp/js/projects/projectViews/projectsFilter.tsx
index 85ade5bda9..9ba557e589 100644
--- a/jsapp/js/projects/projectViews/projectsFilter.tsx
+++ b/jsapp/js/projects/projectViews/projectsFilter.tsx
@@ -154,7 +154,7 @@ export default function ProjectsFilter(props: ProjectsFilterProps) {
 
           <Button
             type='frame'
-            color='dark-red'
+            color='red'
             size='m'
             onClick={resetFilters}
             label={t('Reset')}
diff --git a/jsapp/js/projects/projectViews/projectsFilterEditor.tsx b/jsapp/js/projects/projectViews/projectsFilterEditor.tsx
index e28721324b..e428504356 100644
--- a/jsapp/js/projects/projectViews/projectsFilterEditor.tsx
+++ b/jsapp/js/projects/projectViews/projectsFilterEditor.tsx
@@ -180,7 +180,7 @@ export default function ProjectsFilterEditor(props: ProjectsFilterEditorProps) {
       <div className={styles.column}>
         <Button
           type='bare'
-          color='dark-red'
+          color='red'
           size='m'
           onClick={props.onDelete}
           startIcon='trash'
diff --git a/jsapp/js/projects/projectViews/viewSwitcher.module.scss b/jsapp/js/projects/projectViews/viewSwitcher.module.scss
index 985c2d6c87..c37aaad366 100644
--- a/jsapp/js/projects/projectViews/viewSwitcher.module.scss
+++ b/jsapp/js/projects/projectViews/viewSwitcher.module.scss
@@ -21,7 +21,7 @@
   @include mixins.centerRowFlex;
   font-size: sizes.$x20;
   font-weight: 800;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
   padding: sizes.$x6 sizes.$x16;
   max-width: sizes.$x400;
 
diff --git a/jsapp/js/projects/projectsTable/bulkActions/bulkDeletePrompt.tsx b/jsapp/js/projects/projectsTable/bulkActions/bulkDeletePrompt.tsx
index b1f46f356a..7000a35784 100644
--- a/jsapp/js/projects/projectsTable/bulkActions/bulkDeletePrompt.tsx
+++ b/jsapp/js/projects/projectsTable/bulkActions/bulkDeletePrompt.tsx
@@ -67,7 +67,7 @@ export default function BulkDeletePrompt(props: BulkDeletePromptProps) {
         },
         {
           type: 'full',
-          color: 'dark-red',
+          color: 'red',
           label: 'Delete',
           onClick: onConfirmDelete,
           isDisabled: !isDataChecked || !isFormChecked || !isRecoverChecked,
diff --git a/jsapp/js/projects/projectsTable/projectBulkActions.tsx b/jsapp/js/projects/projectsTable/projectBulkActions.tsx
index 82ef43591f..20be4f8d91 100644
--- a/jsapp/js/projects/projectsTable/projectBulkActions.tsx
+++ b/jsapp/js/projects/projectsTable/projectBulkActions.tsx
@@ -58,7 +58,7 @@ export default function ProjectBulkActions(props: ProjectBulkActionsProps) {
       <Button
         isDisabled={!canBulkDelete}
         type='bare'
-        color='dark-red'
+        color='red'
         size='s'
         startIcon='trash'
         onClick={() => setIsDeletePromptOpen(true)}
diff --git a/jsapp/js/projects/projectsTable/projectQuickActions.tsx b/jsapp/js/projects/projectsTable/projectQuickActions.tsx
index 23377eeff7..65c7295895 100644
--- a/jsapp/js/projects/projectsTable/projectQuickActions.tsx
+++ b/jsapp/js/projects/projectsTable/projectQuickActions.tsx
@@ -108,7 +108,7 @@ const ProjectQuickActions = ({asset}: ProjectQuickActionsProps) => {
       <Button
         isDisabled={!isManagingPossible}
         type='bare'
-        color='dark-red'
+        color='red'
         size='s'
         startIcon='trash'
         onClick={() =>
diff --git a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx
index 9cbc0037d0..edfe12ce3b 100644
--- a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx
+++ b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx
@@ -37,7 +37,7 @@ export default function ProjectQuickActionsEmpty() {
       <Button
         isDisabled
         type='bare'
-        color='dark-red'
+        color='red'
         size='s'
         startIcon='trash'
         tooltip={t('Delete') + ' – ' + NO_PROJECT_SELECTED}
diff --git a/jsapp/js/projects/projectsTable/projectsTableHeader.module.scss b/jsapp/js/projects/projectsTable/projectsTableHeader.module.scss
index a778d4b89d..d3008ec2ef 100644
--- a/jsapp/js/projects/projectsTable/projectsTableHeader.module.scss
+++ b/jsapp/js/projects/projectsTable/projectsTableHeader.module.scss
@@ -141,13 +141,13 @@ $resizer-width: sizes.$x16 + $line-width;
     bottom: sizes.$x6;
     display: inline-block;
     position: absolute;
-    background-color: colors.$kobo-gray-65;
+    background-color: colors.$kobo-gray-500;
     // Give a little fade
-    border-top: sizes.$x1 solid colors.$kobo-gray-92;
-    border-bottom: sizes.$x1 solid colors.$kobo-gray-92;
+    border-top: sizes.$x1 solid colors.$kobo-gray-300;
+    border-bottom: sizes.$x1 solid colors.$kobo-gray-300;
     box-shadow:
-      0 -1px 0 colors.$kobo-gray-96,
-      0  1px 0 colors.$kobo-gray-96;
+      0 -1px 0 colors.$kobo-gray-200,
+      0  1px 0 colors.$kobo-gray-200;
     width: $line-width;
     content: '';
     z-index: 1; // Layer below the resizer "pad" but above adjacent column headers
diff --git a/jsapp/js/projects/projectsTable/projectsTableRow.module.scss b/jsapp/js/projects/projectsTable/projectsTableRow.module.scss
index 16b4a9222d..422b56ee6c 100644
--- a/jsapp/js/projects/projectsTable/projectsTableRow.module.scss
+++ b/jsapp/js/projects/projectsTable/projectsTableRow.module.scss
@@ -5,7 +5,7 @@
 @use 'scss/variables';
 @use 'scss/z-indexes';
 
-$projects-table-hover-bg: colors.$kobo-gray-98;
+$projects-table-hover-bg: colors.$kobo-gray-100;
 $projects-table-row-padding: sizes.$x8;
 // The shared height of a row: project rows are bigger due to padding, but
 // header rows use this size without paddings
@@ -23,9 +23,9 @@ $projects-table-row-height: sizes.$x36;
 }
 
 .cell {
-  border-bottom: sizes.$x1 solid colors.$kobo-gray-92;
+  border-bottom: sizes.$x1 solid colors.$kobo-gray-300;
   padding: $projects-table-row-padding;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   flex: 1 0 auto;
   // ensures the table columns are same width for all rows
   width: 10%;
@@ -223,7 +223,7 @@ $projects-table-row-height: sizes.$x36;
 .row.rowTypeHeader {
   .cell {
     @include mixins.centerRowFlex;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     border-top: 0;
     cursor: pointer;
     height: $projects-table-row-height;
@@ -234,7 +234,7 @@ $projects-table-row-height: sizes.$x36;
     contain: inline-size style;
 
     &:hover {
-      color: colors.$kobo-gray-14 !important;
+      color: colors.$kobo-gray-900 !important;
     }
 
     // checkbox header not clickable - use default cursor
diff --git a/jsapp/js/router/invalidatedPassword.component.tsx b/jsapp/js/router/invalidatedPassword.component.tsx
index da3374d854..3f93cc46ae 100644
--- a/jsapp/js/router/invalidatedPassword.component.tsx
+++ b/jsapp/js/router/invalidatedPassword.component.tsx
@@ -21,7 +21,7 @@ export default function InvalidatedPassword() {
     <BasicLayout>
       <div className={styles.root}>
         <header className={styles.header}>
-          <Icon name='warning' size='l' color='red' />
+          <Icon name='warning' size='l' color='mid-red' />
           <h1>{t('Temporary Access Restriction: Password Update Required')}</h1>
         </header>
 
diff --git a/jsapp/js/toasterConfig.tsx b/jsapp/js/toasterConfig.tsx
index ea7beac383..2d5ab86af1 100644
--- a/jsapp/js/toasterConfig.tsx
+++ b/jsapp/js/toasterConfig.tsx
@@ -10,7 +10,7 @@ export default function ToasterConfig() {
         style: {
           borderRadius: '6px',
           padding: '16px',
-          background: '#1e2129', // $kobo-gray-14
+          background: '#1e2129', // $kobo-gray-900
           color: '#fff', // $kobo-white
           maxHeight: '90vh',
           overflow: 'hidden',
@@ -18,19 +18,19 @@ export default function ToasterConfig() {
         success: {
           iconTheme: {
             primary: '#96eb9e', // $kobo-green
-            secondary: '#1e2129', // $kobo-gray-14
+            secondary: '#1e2129', // $kobo-gray-900
           },
         },
         error: {
           iconTheme: {
-            primary: '#fe6b7d', // $kobo-red
-            secondary: '#1e2129', // $kobo-gray-14
+            primary: '#ff8080', // $kobo-mid-red
+            secondary: '#1e2129', // $kobo-gray-900
           },
         },
         loading: {
           iconTheme: {
-            primary: '#979fb4', // $kobo-gray-65
-            secondary: '#1e2129', // $kobo-gray-14
+            primary: '#979fb4', // $kobo-gray-500
+            secondary: '#1e2129', // $kobo-gray-900
           },
         },
         duration: 5000, // 5 seconds
diff --git a/jsapp/scss/_variables.scss b/jsapp/scss/_variables.scss
index 102ab856a4..b38091edf6 100644
--- a/jsapp/scss/_variables.scss
+++ b/jsapp/scss/_variables.scss
@@ -8,7 +8,7 @@ $s-breadcrumbs-height: 70px;
 $s-fb-row-locking-icons-width: 25px;
 $s-fb-row-buttons-width: 25px;
 
-$drawer-background: colors.$kobo-gray-96;
+$drawer-background: colors.$kobo-gray-200;
 $drawer-icons-width: 58px;
 $s-drawer-width: 270px;
 
@@ -18,7 +18,7 @@ $base-font-size: 14px;
 
 // Form Builder variables
 
-$cardBorderColor: colors.$kobo-gray-65;
+$cardBorderColor: colors.$kobo-gray-500;
 $cardInSortBorderColor: colors.$kobo-blue;
 $linkColor: colors.$kobo-blue;
 $cardBorderStyle: 1px solid $cardBorderColor;
diff --git a/jsapp/scss/colors.scss b/jsapp/scss/colors.scss
index 1603723d1a..62620437b8 100644
--- a/jsapp/scss/colors.scss
+++ b/jsapp/scss/colors.scss
@@ -1,82 +1,82 @@
 // Kobo global palette of colors.
 
 /*
- * The Kobo "gray" scale
- *
- * NOTE: the list consist of colors with same hue (225) and saturation (16).
+ * The Kobo neutral scale
  */
 
 // (accessible) our black, very very rare, only use if necessary for contrast
-$kobo-gray-14: hsl(225deg 16% 14%); // #1e2129
+$kobo-gray-900: hsl(225deg 17% 14%); // #1e212a
 
 // (accessible) active text, important text, text on background, top navigation
 // background
-$kobo-gray-24: hsl(225deg 16% 24%); // #333847
+$kobo-gray-800: hsl(225deg 16% 24%); // #333847
 
 // (accessible) default text, inactive text, options text, buttons text,
 // tabs text, notifications background, hover for popups and dropdowns
-$kobo-gray-40: hsl(225deg 16% 40%); // #565e76
+$kobo-gray-700: hsl(226deg 16% 42%); // #5a627d
 
 // (readable) clickable icons on hover
-$kobo-gray-55: hsl(225deg 16% 55%); // #7a839f
+$kobo-gray-600: hsl(225deg 16% 58%); // #828ba5
 
 // icons default (clickable), arrows and indicators default
-$kobo-gray-65: hsl(225deg 16% 65%); // #979fb4
+$kobo-gray-500: hsl(226deg 16% 70%); // #a6acbf
 
 // inactive icons, some decorative icons
-$kobo-gray-85: hsl(225deg 16% 85%); // #d3d6df
+$kobo-gray-400: hsl(228deg 16% 82%); // #cacdd9
 
 // scroll bars, table lines, dividers, background of clickable icons on hover
 // when also in a highlighted table row
-$kobo-gray-92: hsl(225deg 16% 92%); // #e7e9ee
+$kobo-gray-300: hsl(227deg 18% 90%); // #e1e3ea
 
 // default light background, icons on hover, sidebar menu, table headings, …
-$kobo-gray-96: hsl(225deg 16% 96%); // #f3f4f6
+$kobo-gray-200: hsl(228deg 16% 94%); // #edeef2
 
 // table row highlight on hover
-$kobo-gray-98: hsl(225deg 16% 98%); // #f9f9fb
+$kobo-gray-100: hsl(240deg 20% 98%); // #f9f9fb
 
 // white background
-$kobo-white: hsl(225deg 16% 100%); // #ffffff
+$kobo-white: hsl(0deg 0% 100%); // #ffffff
 
 /*
  * Primary colours & shades
  */
 
-$kobo-dark-blue: hsl(206deg 100% 31%); // #00599d
-$kobo-hover-blue: hsl(213deg 81% 59%); // #408deb
+$kobo-dark-blue: hsl(207deg 77% 32%); // #135991
+$kobo-hover-blue: hsl(207deg 77% 43%); // #1977c2
 $kobo-blue: hsl(207deg 90% 54%); // #2095f3
-$kobo-mid-blue: hsl(204deg 100% 70%); // #64c0ff (previously $kobo-alt-blue)
-$kobo-light-blue: hsl(207deg 100% 88%); // #c0e3ff (previously $kobo-mid-blue)
-$kobo-bg-blue: hsl(209deg 100% 95%); // #e8f4ff (previously $kobo-light-blue)
+$kobo-mid-blue: hsl(207deg 90% 77%); // #8fcaf9 (previously $kobo-alt-blue)
+$kobo-light-blue: hsl(207deg 88% 91%); // #d2e9fc (previously $kobo-mid-blue)
+$kobo-bg-blue: hsl(206deg 84% 95%); // #e8f4fd (previously $kobo-light-blue)
 
-$kobo-dark-teal: hsl(185deg 61% 28%); // #1c6d74
-$kobo-hover-teal: hsl(186deg 65% 39%); // #239aa4
+$kobo-dark-teal: hsl(185deg 57% 25%); // #1b5e64
+$kobo-hover-teal: hsl(185deg 57% 35%); // #26838c
 $kobo-teal: hsl(185deg 57% 57%); // #52c5d0
-$kobo-mid-teal: hsl(186deg 72% 78%); // #d4f0f3
-$kobo-light-teal: hsl(186deg 56% 89%); // #d4f0f3
-$kobo-bg-teal: hsl(180deg 68% 96%); // #effcfc
+$kobo-mid-teal: hsl(186deg 57% 75%); // #9bdde4
+$kobo-light-teal: hsl(185deg 58% 85%); // #c3ebef
+$kobo-bg-teal: hsl(188deg 60% 95%); // #ebf8fa
 
 /*
  * Secondary & tertiary colors
  */
 
 $kobo-storm: hsl(224deg 33% 59%); // #7386b9
-$kobo-mid-storm: hsl(224deg 56% 77%); // #a3b5e5
-$kobo-light-storm: hsl(224deg 65% 97%); // #f1f4fc (previously $kobo-cloud)
+$kobo-mid-storm: hsl(223deg 34% 79%); // #b8c2dc
+$kobo-light-storm: hsl(225deg 31% 95%); // #eef0f6 (previously $kobo-cloud)
 
-$kobo-purple: hsl(274deg 47% 66%); // #ae81d1
-$kobo-violet: hsl(271deg 92% 85%); // #dab6fc
+$kobo-purple: hsl(290deg 53% 65%); // #c577d5
+$kobo-violet: hsl(290deg 53% 85%); // #e6c5ed
 $kobo-pink: hsl(290deg 53% 93%); // #f4e5f7
 
-$kobo-dark-red: hsl(0deg 100% 31%); // #9d0000
-$kobo-red: hsl(352deg 100% 70%); // #fe6b7d
-$kobo-light-red: hsl(352deg 100% 92%); // #ffd5da
+$kobo-dark-red: hsl(0deg 100% 26%); // #850000
+$kobo-red: hsl(0deg 100% 31%); // #9d0000 (previously $kobo-dark-red)
+$kobo-mid-red: hsl(0deg 100% 75%); // #ff8080 (previously $kobo-red)
+$kobo-hover-red: hsl(0deg 100% 90%); // #ffcccc
+$kobo-light-red: hsl(0deg 100% 96%); // #ffe9e9
 
-$kobo-dark-amber: hsl(34deg 40% 35%); // #7d5e36
-$kobo-amber: hsl(30deg 100% 72%); // #fdb670
+$kobo-dark-amber: hsl(30deg 100% 25%); // #803f00
+$kobo-amber: hsl(29deg 100% 75%); // #ffbe80
 $kobo-light-amber: hsl(30deg 100% 90%); // #ffe8cc
 
 $kobo-dark-green: hsl(146deg 71% 31%); // #178949
-$kobo-green: hsl(126deg 68% 75%); // #96eb9e
-$kobo-light-green: hsl(104deg 71% 92%); // #e3f9db (previously $kobo-lime)
+$kobo-green: hsl(146deg 72% 75%); // #92edba
+$kobo-light-green: hsl(147deg 69% 95%); // #e3f9db (previously $kobo-lime)
diff --git a/jsapp/scss/components/_kobo.background-audio-player.scss b/jsapp/scss/components/_kobo.background-audio-player.scss
index f259ba6946..c282089720 100644
--- a/jsapp/scss/components/_kobo.background-audio-player.scss
+++ b/jsapp/scss/components/_kobo.background-audio-player.scss
@@ -6,7 +6,7 @@
     display: block;
     margin-bottom: 6px;
     font-weight: 500;
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 
   .background-audio-player__audio {
diff --git a/jsapp/scss/components/_kobo.bem.ui.scss b/jsapp/scss/components/_kobo.bem.ui.scss
index b90ab41af1..6699734169 100644
--- a/jsapp/scss/components/_kobo.bem.ui.scss
+++ b/jsapp/scss/components/_kobo.bem.ui.scss
@@ -88,7 +88,7 @@ iframe {
   & > label {
     font-weight: normal;
     font-size: 12px;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
 
     &.long {
       padding-top: 5px;
@@ -110,7 +110,7 @@ iframe {
     width: 100%;
     padding: sizes.$x10 sizes.$x14;
     font-size: sizes.$x14;
-    border: 1px solid colors.$kobo-gray-92;
+    border: 1px solid colors.$kobo-gray-300;
 
     &:focus {
       border-color: colors.$kobo-blue;
@@ -136,7 +136,7 @@ iframe {
   padding: 6px 0px;
   font-size: 15px;
   border: 1px solid transparent;
-  border-bottom-color: colors.$kobo-gray-92;
+  border-bottom-color: colors.$kobo-gray-300;
   transition: border-color 0.3s;
 
   &:focus {
@@ -180,13 +180,13 @@ span.svg-icon {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: colors.$kobo-gray-65;
+  background-color: colors.$kobo-gray-500;
   background-color: transparent;
   border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: colors.$kobo-gray-65;
+  background-color: colors.$kobo-gray-500;
   outline: none;
   border-radius: 6px;
 }
diff --git a/jsapp/scss/components/_kobo.button.scss b/jsapp/scss/components/_kobo.button.scss
index fb76fb229b..8f95cec1b7 100644
--- a/jsapp/scss/components/_kobo.button.scss
+++ b/jsapp/scss/components/_kobo.button.scss
@@ -38,7 +38,7 @@
   text-align: center;
   border-radius: sizes.$x6;
   color: colors.$kobo-white;
-  background-color: colors.$kobo-gray-40;
+  background-color: colors.$kobo-gray-700;
   box-shadow: 0 sizes.$x2 sizes.$x4 0 rgba(0, 0, 0, 0.25);
   height: auto;
   min-height: sizes.$x40;
@@ -111,15 +111,15 @@
   }
 
   &.kobo-button--whitegray {
-    color: colors.$kobo-gray-24;
-    background-color: colors.$kobo-gray-96;
+    color: colors.$kobo-gray-800;
+    background-color: colors.$kobo-gray-200;
 
     &[disabled] {
-      color: rgba(colors.$kobo-gray-24, 0.75);
+      color: rgba(colors.$kobo-gray-800, 0.75);
     }
 
     &.kobo-button--pending .k-icon.k-icon-spinner.k-spin {
-      color: colors.$kobo-gray-24;
+      color: colors.$kobo-gray-800;
     }
   }
 
diff --git a/jsapp/scss/components/_kobo.drawer.scss b/jsapp/scss/components/_kobo.drawer.scss
index 291685b8d9..f307768f63 100644
--- a/jsapp/scss/components/_kobo.drawer.scss
+++ b/jsapp/scss/components/_kobo.drawer.scss
@@ -22,7 +22,7 @@
   width: $s-drawer-width;
   display: flex;
   flex-direction: row;
-  border-right: 2px solid colors.$kobo-gray-92;
+  border-right: 2px solid colors.$kobo-gray-300;
 }
 
 .k-drawer__primary-icons {
@@ -37,7 +37,7 @@
   font-size: 26px;
   margin: 6px 0;
   text-align: center;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   padding: 0;
   border-left: 3px solid transparent;
 
@@ -68,7 +68,7 @@
     text-align: center;
     font-weight: normal;
     position: relative;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
 
     &:hover {
       color: colors.$kobo-teal;
diff --git a/jsapp/scss/components/_kobo.drawer.sidebar.scss b/jsapp/scss/components/_kobo.drawer.sidebar.scss
index a9f433f2d7..370808204d 100644
--- a/jsapp/scss/components/_kobo.drawer.sidebar.scss
+++ b/jsapp/scss/components/_kobo.drawer.sidebar.scss
@@ -14,7 +14,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   flex: 1;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 
   &.form-sidebar--loading {
     pointer-events: none;
@@ -35,11 +35,11 @@
   }
 
   .form-sidebar__navlink {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
   }
 
   .active {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 
   .form-sidebar__label {
@@ -51,11 +51,11 @@
     color: inherit;
 
     &:hover {
-      color: colors.$kobo-gray-24;
+      color: colors.$kobo-gray-800;
     }
 
     &.form-sidebar__label--selected {
-      color: colors.$kobo-gray-24;
+      color: colors.$kobo-gray-800;
     }
 
     i {
@@ -74,7 +74,7 @@
       line-height: 20px;
       min-width: 20px;
       border-radius: 20px;
-      background-color: colors.$kobo-gray-92;
+      background-color: colors.$kobo-gray-300;
       text-align: center;
       margin-right: 4px;
     }
@@ -102,13 +102,13 @@
     flex-direction: row;
     align-items: flex-start;
     line-height: 15px;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     font-weight: normal;
     font-size: 12px;
     padding: 5px;
 
     &:hover {
-      color: colors.$kobo-gray-24;
+      color: colors.$kobo-gray-800;
     }
 
     &.form-sidebar__item--active {
diff --git a/jsapp/scss/components/_kobo.dropzone.scss b/jsapp/scss/components/_kobo.dropzone.scss
index bf405b6c77..3af7bda0d6 100644
--- a/jsapp/scss/components/_kobo.dropzone.scss
+++ b/jsapp/scss/components/_kobo.dropzone.scss
@@ -5,9 +5,9 @@
 
 // Extension of `dropzone` used in settings modals
 .kobo-dropzone {
-  background: colors.$kobo-gray-96;
+  background: colors.$kobo-gray-200;
   padding: 30px;
-  border: 2px dashed colors.$kobo-gray-92;
+  border: 2px dashed colors.$kobo-gray-300;
   cursor: pointer;
   border-radius: 6px;
   text-align: center;
@@ -48,8 +48,8 @@
 .kobo-dropzone--form-media {
   background: colors.$kobo-white;
   padding: 40px;
-  border: 6px dashed colors.$kobo-gray-92;
+  border: 6px dashed colors.$kobo-gray-300;
   font-size: 18px;
   font-weight: 500;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 }
diff --git a/jsapp/scss/components/_kobo.form-builder-message-box.scss b/jsapp/scss/components/_kobo.form-builder-message-box.scss
index 750f508cf3..d4961b176e 100644
--- a/jsapp/scss/components/_kobo.form-builder-message-box.scss
+++ b/jsapp/scss/components/_kobo.form-builder-message-box.scss
@@ -5,7 +5,7 @@ $message-box-icon-size: 28px;
 .form-builder-message-box {
   width: 100%;
   margin: 0 auto 20px;
-  background-color: colors.$kobo-gray-40;
+  background-color: colors.$kobo-gray-700;
   color: colors.$kobo-white;
   padding: 10px;
   display: flex;
diff --git a/jsapp/scss/components/_kobo.form-builder.scss b/jsapp/scss/components/_kobo.form-builder.scss
index d9a2f0e007..0e21eba035 100644
--- a/jsapp/scss/components/_kobo.form-builder.scss
+++ b/jsapp/scss/components/_kobo.form-builder.scss
@@ -93,15 +93,15 @@ $s-form-builder-content-width: 1024px;
       height: 75px;
       position: relative;
       z-index: 2;
-      box-shadow: 0 0 3px 0 rgba(colors.$kobo-gray-24, 0.2), 0 0 10px 0 rgba(colors.$kobo-gray-24, 0.1);
+      box-shadow: 0 0 3px 0 rgba(colors.$kobo-gray-800, 0.2), 0 0 10px 0 rgba(colors.$kobo-gray-800, 0.1);
     }
 
     &.form-builder-header__row--secondary {
-      background: colors.$kobo-gray-96;
+      background: colors.$kobo-gray-200;
       height: 50px;
       position: relative;
       z-index: 1;
-      box-shadow: 0 0 3px 0 rgba(colors.$kobo-gray-24, 0.2), 0 0 10px 0 rgba(colors.$kobo-gray-24, 0.1);
+      box-shadow: 0 0 3px 0 rgba(colors.$kobo-gray-800, 0.2), 0 0 10px 0 rgba(colors.$kobo-gray-800, 0.1);
       padding: 0 20px;
     }
   }
@@ -167,7 +167,7 @@ $s-form-builder-content-width: 1024px;
 
         small {
           display: block;
-          color: colors.$kobo-gray-40;
+          color: colors.$kobo-gray-700;
 
           &::before {
             content: '+ ';
@@ -203,7 +203,7 @@ $s-form-builder-content-width: 1024px;
 
     &.form-builder-header__cell--verticalRule {
       width: 1px;
-      background: colors.$kobo-gray-92;
+      background: colors.$kobo-gray-300;
       height: 100%;
     }
   }
@@ -217,9 +217,9 @@ $s-form-builder-content-width: 1024px;
   bottom: 0;
   top: $s-form-builder-header;
   width: $s-form-builder-aside;
-  background-color: colors.$kobo-gray-96;
+  background-color: colors.$kobo-gray-200;
   transition: right $t-form-builder-aside-open;
-  box-shadow: 0 0 3px 0 rgba(colors.$kobo-gray-24, 0.2), 0 0 10px 0 rgba(colors.$kobo-gray-24, 0.1);
+  box-shadow: 0 0 3px 0 rgba(colors.$kobo-gray-800, 0.2), 0 0 10px 0 rgba(colors.$kobo-gray-800, 0.1);
   z-index: z-indexes.$z-form-builder-aside;
 
   &:not(.form-builder-aside--visible) {
@@ -265,7 +265,7 @@ $s-form-builder-content-width: 1024px;
     margin: 15px 0;
     width: 100%;
     height: 220px;
-    border: 2px solid colors.$kobo-gray-92;
+    border: 2px solid colors.$kobo-gray-300;
   }
 
   .cascade-popup__buttonWrapper {
@@ -288,7 +288,7 @@ $s-form-builder-content-width: 1024px;
 
     i {
       font-size: 18px;
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
     }
   }
 }
@@ -396,14 +396,14 @@ $s-form-builder-content-width: 1024px;
 
     .settings__input {
       input[type="text"] {
-        border: 1px solid colors.$kobo-gray-92;
+        border: 1px solid colors.$kobo-gray-300;
       }
     }
   }
 
   .questiontypelist__item {
     text-align: center;
-    background: colors.$kobo-gray-96;
+    background: colors.$kobo-gray-200;
 
     i {
       display: block;
diff --git a/jsapp/scss/components/_kobo.form-view.scss b/jsapp/scss/components/_kobo.form-view.scss
index a33c7aa8e3..5633c3074c 100644
--- a/jsapp/scss/components/_kobo.form-view.scss
+++ b/jsapp/scss/components/_kobo.form-view.scss
@@ -47,7 +47,7 @@ $side-tabs-width-mobile: 70px;
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  background: colors.$kobo-gray-96;
+  background: colors.$kobo-gray-200;
 
   &.form-view--fullscreen {
     // We force the position to avoid problems with stronger specificity
@@ -89,7 +89,7 @@ $side-tabs-width-mobile: 70px;
   overflow-y: auto;
   float: left;
   background: colors.$kobo-white;
-  border-right: 1px solid colors.$kobo-gray-92;
+  border-right: 1px solid colors.$kobo-gray-300;
 
   & + .form-view,
   & + .report-view,
@@ -120,7 +120,7 @@ $side-tabs-width-mobile: 70px;
     font-size: variables.$base-font-size;
     cursor: pointer;
     position: relative;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     font-weight: normal;
     letter-spacing: -0.01em;
     display: flex;
@@ -129,7 +129,7 @@ $side-tabs-width-mobile: 70px;
 
     &:hover,
     &.active {
-      color: colors.$kobo-gray-24;
+      color: colors.$kobo-gray-800;
     }
 
     &.active {
@@ -218,7 +218,7 @@ $side-tabs-width-mobile: 70px;
   }
 
   &.form-view__cell--bordered {
-    border: 1px solid colors.$kobo-gray-92;
+    border: 1px solid colors.$kobo-gray-300;
   }
 
   &.form-view__cell--page-title {
@@ -263,7 +263,7 @@ $side-tabs-width-mobile: 70px;
     width: 30px;
     margin-inline-end: 10px;
     text-align: center;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
 
     .k-icon {
       font-size: 24px;
@@ -298,7 +298,7 @@ $side-tabs-width-mobile: 70px;
   }
 
   &.form-view__cell--bordertop {
-    border-top: 1px solid colors.$kobo-gray-92;
+    border-top: 1px solid colors.$kobo-gray-300;
   }
 
   &.form-view__cell--padding {
@@ -320,12 +320,12 @@ $side-tabs-width-mobile: 70px;
   // preferably with or inside .form-view__cell--first
   &.form-view__cell--label {
     font-size: variables.$base-font-size;
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
     font-weight: 500;
 
     span {
       display: block;
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
       font-size: 12px;
     }
 
@@ -418,7 +418,7 @@ $side-tabs-width-mobile: 70px;
   }
 
   &.form-view__cell--thin-label {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     opacity: 0.6;
     font-size: 12px;
     line-height: 18px;
@@ -463,7 +463,7 @@ $side-tabs-width-mobile: 70px;
 
   &.form-view__group--items {
     padding: 0;
-    border-top: 1px solid colors.$kobo-gray-92;
+    border-top: 1px solid colors.$kobo-gray-300;
     display: flex;
     align-items: center;
 
@@ -491,7 +491,7 @@ $side-tabs-width-mobile: 70px;
 
   .form-view__group--deployments {
     .form-view__group--items:hover {
-      background: colors.$kobo-gray-96;
+      background: colors.$kobo-gray-200;
     }
   }
 
@@ -593,8 +593,8 @@ $side-tabs-width-mobile: 70px;
     display: block;
     margin: 10px 0;
     padding: 10px;
-    border: 1px solid colors.$kobo-gray-92;
-    background: colors.$kobo-gray-96;
+    border: 1px solid colors.$kobo-gray-300;
+    background: colors.$kobo-gray-200;
     font-size: 13px;
     white-space: normal;
   }
@@ -619,8 +619,8 @@ $side-tabs-width-mobile: 70px;
 
   code {
     padding: 4px;
-    border: 1px solid colors.$kobo-gray-92;
-    background: colors.$kobo-gray-96;
+    border: 1px solid colors.$kobo-gray-300;
+    background: colors.$kobo-gray-200;
     margin-left: 5px;
     margin-right: 5px;
   }
diff --git a/jsapp/scss/components/_kobo.lib-list.scss b/jsapp/scss/components/_kobo.lib-list.scss
index 01ddc582bb..4c634e5b3c 100644
--- a/jsapp/scss/components/_kobo.lib-list.scss
+++ b/jsapp/scss/components/_kobo.lib-list.scss
@@ -21,7 +21,7 @@
 }
 
 .lib-list__item {
-  border: 1px solid colors.$kobo-gray-92;
+  border: 1px solid colors.$kobo-gray-300;
   padding-left: 20px;
   position: relative;
   margin: 5px 0;
@@ -59,7 +59,7 @@
 }
 
 .lib-list__tag {
-  background-color: colors.$kobo-gray-40;
+  background-color: colors.$kobo-gray-700;
   color: colors.$kobo-white;
   font-weight: 400;
   margin-bottom: sizes.$x4;
@@ -79,7 +79,7 @@
   width: 12px;
   height: 12px;
   margin-top: -8px;
-  background-color: colors.$kobo-gray-92;
+  background-color: colors.$kobo-gray-300;
   border-radius: 6px;
 }
 
diff --git a/jsapp/scss/components/_kobo.lib-nav.scss b/jsapp/scss/components/_kobo.lib-nav.scss
index 13e3f652e4..7ff5745ba2 100644
--- a/jsapp/scss/components/_kobo.lib-nav.scss
+++ b/jsapp/scss/components/_kobo.lib-nav.scss
@@ -26,7 +26,7 @@
       padding: 5px 8px;
       width: 100%;
       color: inherit;
-      border: 1px solid colors.$kobo-gray-92;
+      border: 1px solid colors.$kobo-gray-300;
       border-radius: 3px;
       background: colors.$kobo-white;
 
@@ -51,7 +51,7 @@
 .lib-nav__expanded {
   padding-bottom: 10px;
   margin-bottom: 20px;
-  border-bottom: 1px solid colors.$kobo-gray-92;
+  border-bottom: 1px solid colors.$kobo-gray-300;
 
   .lib-nav__expandedToggle {
     flex: 1;
diff --git a/jsapp/scss/components/_kobo.locking.scss b/jsapp/scss/components/_kobo.locking.scss
index 5e31b3fa4d..36d90a7f87 100644
--- a/jsapp/scss/components/_kobo.locking.scss
+++ b/jsapp/scss/components/_kobo.locking.scss
@@ -17,17 +17,17 @@
   .card__settings,
   .card--selectquestion__expansion,
   .params-view__simple-wrapper {
-    background-color: colors.$kobo-gray-96;
+    background-color: colors.$kobo-gray-200;
   }
 
   .question__tags::after,
   .card__settings::after,
   .card--selectquestion__expansion::after {
-    border-bottom-color: colors.$kobo-gray-96;
+    border-bottom-color: colors.$kobo-gray-200;
   }
 
   .card__addoptions__layer {
-    background-color: rgba(colors.$kobo-gray-96, 0.5);
+    background-color: rgba(colors.$kobo-gray-200, 0.5);
   }
 }
 
@@ -103,7 +103,7 @@
     }
     &.locked-features__list--cants {
       .k-icon {
-        color: colors.$kobo-red;
+        color: colors.$kobo-mid-red;
       }
     }
   }
diff --git a/jsapp/scss/components/_kobo.navigation.scss b/jsapp/scss/components/_kobo.navigation.scss
index e8021e5f1b..b6366e3794 100644
--- a/jsapp/scss/components/_kobo.navigation.scss
+++ b/jsapp/scss/components/_kobo.navigation.scss
@@ -146,7 +146,7 @@
   }
 
   .account-box__menu-item--mini-profile {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     display: inline-block;
     width: calc(100% - 70px);
     line-height: 20px;
@@ -175,7 +175,7 @@
     padding-bottom: 15px;
 
     a {
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
       cursor: pointer;
       font-weight: normal;
       display: block;
@@ -212,23 +212,23 @@
 
   .account-box__menu-li--lang {
     position: relative;
-    border-top: 1px solid colors.$kobo-gray-92;
+    border-top: 1px solid colors.$kobo-gray-300;
     padding-bottom: 5px;
 
     ul {
       margin-top: 5px;
       background-color: colors.$kobo-white;
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
       min-width: 140px;
       padding: 0;
-      border: 1px solid colors.$kobo-gray-92;
+      border: 1px solid colors.$kobo-gray-300;
 
       li {
         text-transform: capitalize;
         padding: 0;
 
         &:not(:last-child) {
-          border-bottom: 1px solid colors.$kobo-gray-92;
+          border-bottom: 1px solid colors.$kobo-gray-300;
         }
 
         a {
@@ -253,7 +253,7 @@
 
 .main-header {
   .main-header__icon {
-    color: colors.$kobo-gray-65;
+    color: colors.$kobo-gray-500;
     vertical-align: middle;
 
     .k-icon {
@@ -290,7 +290,7 @@
 
       // keep these pseudo-states separate
       &::placeholder {
-        color: colors.$kobo-gray-40;
+        color: colors.$kobo-gray-700;
       }
 
       &:hover {
@@ -307,7 +307,7 @@
   .main-header__counter {
     font-size: variables.$base-font-size;
     margin-right: 20px;
-    color: colors.$kobo-gray-65;
+    color: colors.$kobo-gray-500;
   }
 }
 
@@ -389,7 +389,7 @@
     ul {
       opacity: 1;
       position: static;
-      border: 1px solid colors.$kobo-gray-92;
+      border: 1px solid colors.$kobo-gray-300;
       margin-left: 12px;
       padding: 0px;
       max-height: 1000px;
diff --git a/jsapp/scss/components/_kobo.project-downloads.scss b/jsapp/scss/components/_kobo.project-downloads.scss
index 7c72714a9d..37b5ecb8b3 100644
--- a/jsapp/scss/components/_kobo.project-downloads.scss
+++ b/jsapp/scss/components/_kobo.project-downloads.scss
@@ -29,7 +29,7 @@
     display: block;
     width: 100%;
     height: 1px;
-    background-color: colors.$kobo-gray-92;
+    background-color: colors.$kobo-gray-300;
     margin: 0;
     border: 0;
   }
@@ -54,7 +54,7 @@
 
   .kobo-select {
     .kobo-select__control {
-      border: 1px solid colors.$kobo-gray-92;
+      border: 1px solid colors.$kobo-gray-300;
     }
   }
 
@@ -132,7 +132,7 @@
           height: 1em;
           display: block;
           margin: 0;
-          background-color: colors.$kobo-gray-92;
+          background-color: colors.$kobo-gray-300;
         }
       }
     }
@@ -183,7 +183,7 @@
     iframe {
       width: 100%;
       height: 250px;
-      border: 1px solid colors.$kobo-gray-92;
+      border: 1px solid colors.$kobo-gray-300;
       border-radius: 4px;
     }
   }
diff --git a/jsapp/scss/components/_kobo.service-row.scss b/jsapp/scss/components/_kobo.service-row.scss
index a4c4519740..04c39b8134 100644
--- a/jsapp/scss/components/_kobo.service-row.scss
+++ b/jsapp/scss/components/_kobo.service-row.scss
@@ -15,12 +15,12 @@ $s-service-row-column-spacing: 10px;
   position: relative;
 
   &:not(:last-of-type) {
-    border-bottom: 1px solid colors.$kobo-gray-92;
+    border-bottom: 1px solid colors.$kobo-gray-300;
   }
 
   &:not(.service-row--header):hover {
-    background-color: colors.$kobo-gray-96;
-    color: colors.$kobo-gray-24;
+    background-color: colors.$kobo-gray-200;
+    color: colors.$kobo-gray-800;
   }
 
   &.service-row--clickable {
@@ -33,11 +33,11 @@ $s-service-row-column-spacing: 10px;
   }
 
   &.service-row--active {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
   }
 
   &.service-row--inactive {
-    color: colors.$kobo-gray-65;
+    color: colors.$kobo-gray-500;
   }
 }
 
@@ -89,7 +89,7 @@ $s-service-row-column-spacing: 10px;
   }
 
   &.service-row__column--success {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
   }
 
   &.service-row__column--pending {
diff --git a/jsapp/scss/components/_kobo.simple-table.scss b/jsapp/scss/components/_kobo.simple-table.scss
index cede1c3146..c13236b517 100644
--- a/jsapp/scss/components/_kobo.simple-table.scss
+++ b/jsapp/scss/components/_kobo.simple-table.scss
@@ -40,7 +40,7 @@
 
 .simple-table__body {
   .simple-table__cell {
-    border-bottom: 1px solid colors.$kobo-gray-96;
+    border-bottom: 1px solid colors.$kobo-gray-200;
   }
 }
 
@@ -54,8 +54,8 @@
 .simple-table__header {
   .simple-table__row:nth-child(1) {
     .simple-table__cell {
-      background-color: colors.$kobo-gray-96;
-      border-bottom: 2px solid colors.$kobo-gray-92;
+      background-color: colors.$kobo-gray-200;
+      border-bottom: 2px solid colors.$kobo-gray-300;
       font-weight: 600;
     }
   }
diff --git a/jsapp/scss/components/_kobo.table-meta.scss b/jsapp/scss/components/_kobo.table-meta.scss
index 1b7316dfa2..0992b150d5 100644
--- a/jsapp/scss/components/_kobo.table-meta.scss
+++ b/jsapp/scss/components/_kobo.table-meta.scss
@@ -41,11 +41,11 @@
   height: 20px;
   padding: 0 5px;
   border-radius: 50%;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
 
   &:hover {
     color: colors.$kobo-white;
-    background-color: colors.$kobo-dark-red;
+    background-color: colors.$kobo-red;
   }
 }
 
diff --git a/jsapp/scss/components/_kobo.tooltips-big.scss b/jsapp/scss/components/_kobo.tooltips-big.scss
index 3eef77d54c..f91587d330 100644
--- a/jsapp/scss/components/_kobo.tooltips-big.scss
+++ b/jsapp/scss/components/_kobo.tooltips-big.scss
@@ -20,7 +20,7 @@
       font-weight: normal;
       line-height: 1.35em;
       color: colors.$kobo-white;
-      background-color: colors.$kobo-gray-40;
+      background-color: colors.$kobo-gray-700;
       padding: 6px 12px;
       top: calc(100% + 6px);
       left: 50%;
@@ -44,7 +44,7 @@
       }
 
       &::before {
-        border-bottom: 5px solid colors.$kobo-gray-40;
+        border-bottom: 5px solid colors.$kobo-gray-700;
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
         position: absolute;
diff --git a/jsapp/scss/formbuild/_kobomatrix.scss b/jsapp/scss/formbuild/_kobomatrix.scss
index f2347a559a..441cc54d5b 100644
--- a/jsapp/scss/formbuild/_kobomatrix.scss
+++ b/jsapp/scss/formbuild/_kobomatrix.scss
@@ -1,7 +1,7 @@
 @use 'scss/colors';
 
 .card__kobomatrix {
-  border: 1px solid colors.$kobo-gray-65;
+  border: 1px solid colors.$kobo-gray-500;
   border-top: none;
 }
 
@@ -43,15 +43,15 @@
 .matrix-cols--header {
   display: flex;
   flex-wrap: nowrap;
-  border-top: 1px solid colors.$kobo-gray-92;
-  border-left: 1px solid colors.$kobo-gray-92;
+  border-top: 1px solid colors.$kobo-gray-300;
+  border-left: 1px solid colors.$kobo-gray-300;
 
   .matrix-cols__col {
     flex-grow: 1;
     flex-basis: 0;
     padding: 10px 20px;
     text-align: center;
-    border-right: 1px solid colors.$kobo-gray-92;
+    border-right: 1px solid colors.$kobo-gray-300;
     position: relative;
     padding-right: 30px;
     vertical-align: middle;
@@ -59,8 +59,8 @@
     margin-bottom: -1px;
 
     &.active {
-      background: colors.$kobo-gray-96;
-      border-bottom: 1px solid colors.$kobo-gray-96;
+      background: colors.$kobo-gray-200;
+      border-bottom: 1px solid colors.$kobo-gray-200;
     }
 
     .matrix-cols__colattr--type {
@@ -86,8 +86,8 @@
 
 .matrix-cols__settings {
   width: 100%;
-  background: colors.$kobo-gray-96;
-  border: 1px solid colors.$kobo-gray-92;
+  background: colors.$kobo-gray-200;
+  border: 1px solid colors.$kobo-gray-300;
   border-bottom: none;
   padding: 15px;
   display: none;
@@ -126,7 +126,7 @@
 
     > input[type="text"] {
       padding: 4px 8px;
-      border: 1px solid colors.$kobo-gray-65;
+      border: 1px solid colors.$kobo-gray-500;
       border-radius: 4px;
     }
 
@@ -155,8 +155,8 @@
 }
 
 .matrix-cols__options {
-  background: colors.$kobo-gray-96;
-  border: 1px solid colors.$kobo-gray-92;
+  background: colors.$kobo-gray-200;
+  border: 1px solid colors.$kobo-gray-300;
   padding: 10px;
   margin: 20px 0px;
   clear: both;
@@ -172,7 +172,7 @@
     input {
       padding: 4px 8px;
       border-radius: 4px;
-      border: 1px solid colors.$kobo-gray-92;
+      border: 1px solid colors.$kobo-gray-300;
     }
 
     &.matrix-options__value {
@@ -215,19 +215,19 @@
     flex-grow: 1;
     flex-basis: 0;
     padding: 5px;
-    border-top: 1px solid colors.$kobo-gray-92;
+    border-top: 1px solid colors.$kobo-gray-300;
     vertical-align: middle;
     position: relative;
   }
 
   .matrix-cols__col {
-    border-right: 1px solid colors.$kobo-gray-92;
+    border-right: 1px solid colors.$kobo-gray-300;
     text-align: center;
   }
 
   .matrix-items__itemattr {
-    border-right: 1px solid colors.$kobo-gray-92;
-    border-left: 1px solid colors.$kobo-gray-92;
+    border-right: 1px solid colors.$kobo-gray-300;
+    border-left: 1px solid colors.$kobo-gray-300;
     position: relative;
     line-height: 28px;
 
@@ -253,7 +253,7 @@
   }
 
   &--new {
-    border-top: 1px solid colors.$kobo-gray-92;
+    border-top: 1px solid colors.$kobo-gray-300;
 
     i {
       font-size: 20px;
@@ -261,7 +261,7 @@
       opacity: 0.75;
       display: inline-block;
       cursor: pointer;
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
 
       &:hover {
         color: colors.$kobo-blue;
@@ -271,8 +271,8 @@
 
   .matrix-items__itemsettings {
     width: 100%;
-    background: colors.$kobo-gray-96;
-    border: 1px solid colors.$kobo-gray-92;
+    background: colors.$kobo-gray-200;
+    border: 1px solid colors.$kobo-gray-300;
     border-bottom: none;
     padding: 15px;
     display: none;
diff --git a/jsapp/scss/libs/_mdl.scss b/jsapp/scss/libs/_mdl.scss
index 231a8b5934..46588743ef 100644
--- a/jsapp/scss/libs/_mdl.scss
+++ b/jsapp/scss/libs/_mdl.scss
@@ -5,30 +5,30 @@ $root-background: colors.$kobo-white;
 
 $font: "Roboto", sans-serif !default;
 $font_mono: "Roboto Mono", monospace !default;
-$layout-text-color: colors.$kobo-gray-24 !default;
+$layout-text-color: colors.$kobo-gray-800 !default;
 $layout-nav-color: colors.$kobo-white !default;
-$layout-header-bg-color: colors.$kobo-gray-24 !default;
+$layout-header-bg-color: colors.$kobo-gray-800 !default;
 $layout-desktop-header-height: 64px;
 
 @mixin box-shadow {
-  box-shadow: 0 0 2px 0 rgba(colors.$kobo-gray-24, 0.06), 0 2px 2px 0 rgba(colors.$kobo-gray-24, 0.12);
+  box-shadow: 0 0 2px 0 rgba(colors.$kobo-gray-800, 0.06), 0 2px 2px 0 rgba(colors.$kobo-gray-800, 0.12);
   border-radius: 2px;
 }
 
 @mixin box-shadow-big {
-  box-shadow: 0 0 3px 1px rgba(colors.$kobo-gray-24, 0.06), 0 1px 3px 0 rgba(colors.$kobo-gray-24, 0.12);
+  box-shadow: 0 0 3px 1px rgba(colors.$kobo-gray-800, 0.06), 0 1px 3px 0 rgba(colors.$kobo-gray-800, 0.12);
   border-radius: 2px;
 }
 
 // element appears to be above regular box-shadow elements
 @mixin box-shadow-mid {
-  box-shadow: 0 0 8px 0 rgba(colors.$kobo-gray-24, 0.06), 0 8px 8px 0 rgba(colors.$kobo-gray-24, 0.12);
+  box-shadow: 0 0 8px 0 rgba(colors.$kobo-gray-800, 0.06), 0 8px 8px 0 rgba(colors.$kobo-gray-800, 0.12);
   border-radius: 2px;
 }
 
 // element appears to be above mid box-shadow elements
 @mixin box-shadow-top {
-  box-shadow: 0 0 12px 0 rgba(colors.$kobo-gray-24, 0.06), 0 12px 12px 0 rgba(colors.$kobo-gray-24, 0.12);
+  box-shadow: 0 0 12px 0 rgba(colors.$kobo-gray-800, 0.06), 0 12px 12px 0 rgba(colors.$kobo-gray-800, 0.12);
   border-radius: 2px;
 }
 
diff --git a/jsapp/scss/libs/alertify.overrides.scss b/jsapp/scss/libs/alertify.overrides.scss
index e77f64f78d..c3a701ddd8 100644
--- a/jsapp/scss/libs/alertify.overrides.scss
+++ b/jsapp/scss/libs/alertify.overrides.scss
@@ -8,7 +8,7 @@
 }
 
 .alertify .ajs-dialog {
-  box-shadow: 2px 2px 15px 2px rgba(colors.$kobo-gray-24, 0.15);
+  box-shadow: 2px 2px 15px 2px rgba(colors.$kobo-gray-800, 0.15);
 }
 
 .alertify .ajs-header {
@@ -28,10 +28,10 @@
 .alertify.ajs-closable .ajs-commands button.ajs-close {
   background: transparent;
   font-size: 24px;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 
   &:hover {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 }
 
@@ -130,7 +130,7 @@
   .ajs-message.ajs-error,
   .ajs-message.ajs-success,
   .ajs-message.ajs-warning {
-    background: colors.$kobo-gray-24;
+    background: colors.$kobo-gray-800;
     color: colors.$kobo-white;
     padding: 17px 24px;
     padding-right: 44px;
@@ -140,7 +140,7 @@
     line-height: 1.3em;
   }
 
-  .ajs-message.ajs-error {box-shadow: 0 2px 0 0 colors.$kobo-red inset;}
+  .ajs-message.ajs-error {box-shadow: 0 2px 0 0 colors.$kobo-mid-red inset;}
   .ajs-message.ajs-success {box-shadow: 0 2px 0 0 colors.$kobo-green inset;}
   .ajs-message.ajs-warning {box-shadow: 0 2px 0 0 colors.$kobo-amber inset;}
 
@@ -175,7 +175,7 @@
     margin-top: 20px;
     padding-top: 20px;
     padding-bottom: 20px;
-    border-top: 1px solid colors.$kobo-gray-92;
+    border-top: 1px solid colors.$kobo-gray-300;
     font-weight: bold;
   }
 }
diff --git a/jsapp/scss/libs/react-select.overrides.scss b/jsapp/scss/libs/react-select.overrides.scss
index 6078fe0a4a..d822818c56 100644
--- a/jsapp/scss/libs/react-select.overrides.scss
+++ b/jsapp/scss/libs/react-select.overrides.scss
@@ -12,7 +12,7 @@
     }
 
     .kobo-select .kobo-select__control {
-      border-color: colors.$kobo-red;
+      border-color: colors.$kobo-mid-red;
     }
   }
 }
@@ -54,9 +54,9 @@
 
   .kobo-select__control {
     box-shadow: none;
-    border: 1px solid colors.$kobo-gray-92;
+    border: 1px solid colors.$kobo-gray-300;
     border-radius: 6px;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     background-color: colors.$kobo-white;
     min-height: button.$button-height-m;
     height: auto;
@@ -68,7 +68,7 @@
     align-content: center;
 
     &:hover {
-      border-color: colors.$kobo-gray-92;
+      border-color: colors.$kobo-gray-300;
     }
 
     &.kobo-select__control--is-focused {
@@ -84,7 +84,7 @@
   }
 
   .kobo-select__placeholder {
-    color: colors.$kobo-gray-65;
+    color: colors.$kobo-gray-500;
   }
 
   .kobo-select__indicator-separator {
@@ -97,7 +97,7 @@
 
   .kobo-select__single-value,
   .kobo-select__multi-value, {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 
   .kobo-select__multi-value {
@@ -110,8 +110,8 @@
   }
 
   .kobo-select__multi-value__remove:hover {
-    color: colors.$kobo-dark-red;
-    background-color: colors.$kobo-light-red;
+    color: colors.$kobo-red;
+    background-color: colors.$kobo-hover-red;
   }
 
   .kobo-select__indicator {
@@ -152,7 +152,7 @@
 
     // is-focused needs to go after is-selected
     &.kobo-select__option--is-focused {
-      background-color: colors.$kobo-gray-96;
+      background-color: colors.$kobo-gray-200;
     }
   }
 }
diff --git a/jsapp/scss/libs/react-tagsinput.scss b/jsapp/scss/libs/react-tagsinput.scss
index 14493b66ae..27cdf0d862 100644
--- a/jsapp/scss/libs/react-tagsinput.scss
+++ b/jsapp/scss/libs/react-tagsinput.scss
@@ -4,7 +4,7 @@
   &.react-tagsinput-invalid {
     .react-tagsinput-input {
       color: colors.$kobo-red;
-      border-bottom-color: colors.$kobo-red;
+      border-bottom-color: colors.$kobo-mid-red;
     }
   }
 
@@ -17,7 +17,7 @@
 }
 
 .react-tagsinput-tag {
-  background-color: colors.$kobo-gray-40;
+  background-color: colors.$kobo-gray-700;
   color: colors.$kobo-white;
   font-weight: 400;
   margin-bottom: 4px;
@@ -36,6 +36,7 @@
   cursor: pointer;
   color: colors.$kobo-white !important;
   opacity: 0.6;
+  margin-left: 3px;
   margin-inline-start: 3px;
   vertical-align: middle;
 
@@ -47,7 +48,7 @@
 .react-tagsinput-input {
   background: transparent;
   border: 0 none;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-size: 13px;
   font-weight: 400;
   margin-bottom: 2px;
diff --git a/jsapp/scss/stylesheets/partials/_base.scss b/jsapp/scss/stylesheets/partials/_base.scss
index b4461564c6..0342b590ef 100644
--- a/jsapp/scss/stylesheets/partials/_base.scss
+++ b/jsapp/scss/stylesheets/partials/_base.scss
@@ -14,7 +14,7 @@
 
 html {
   height: 100%;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
 }
 
 body {
@@ -55,7 +55,7 @@ hr {
   display: block;
   height: 1px;
   border: 0;
-  border-top: 1px solid colors.$kobo-gray-65;
+  border-top: 1px solid colors.$kobo-gray-500;
   margin: 1em 0;
   padding: 0;
 }
diff --git a/jsapp/scss/stylesheets/partials/_buttons.scss b/jsapp/scss/stylesheets/partials/_buttons.scss
index 6762767aeb..2b326437e1 100644
--- a/jsapp/scss/stylesheets/partials/_buttons.scss
+++ b/jsapp/scss/stylesheets/partials/_buttons.scss
@@ -77,6 +77,6 @@ input[type="button"].btn--block {
 
 .btn--disabled {
     cursor: default;
-    color: colors.$kobo-gray-92;
+    color: colors.$kobo-gray-300;
     font-weight: normal;
 }
diff --git a/jsapp/scss/stylesheets/partials/_misc.scss b/jsapp/scss/stylesheets/partials/_misc.scss
index e8b5d22357..8da5daccc9 100644
--- a/jsapp/scss/stylesheets/partials/_misc.scss
+++ b/jsapp/scss/stylesheets/partials/_misc.scss
@@ -26,7 +26,7 @@
     text-align: center;
     text-transform: uppercase;
     color: colors.$kobo-white;
-    background-color: colors.$kobo-gray-40;
+    background-color: colors.$kobo-gray-700;
 }
 
 .or + hr {
@@ -53,8 +53,8 @@
     border: none;
     border-radius: 0px;
     box-shadow: none;
-    border-bottom: 2px dotted colors.$kobo-gray-40;
-    color: colors.$kobo-gray-24;
+    border-bottom: 2px dotted colors.$kobo-gray-700;
+    color: colors.$kobo-gray-800;
     display: block;
     height: 30px;
     line-height: 30px;
@@ -84,7 +84,7 @@
 }
 
 .select2-drop-active {
-  border: 1px solid colors.$kobo-gray-92;
+  border: 1px solid colors.$kobo-gray-300;
   background: colors.$kobo-white;
   font-size: 13px;
   box-shadow: none;
@@ -100,7 +100,7 @@
     height: 0;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
-    border-bottom:6px solid colors.$kobo-gray-92;
+    border-bottom:6px solid colors.$kobo-gray-300;
   }
   &.select2-drop-above:before {
     display: none;
@@ -111,7 +111,7 @@
 }
 
 .select2-drop.select2-drop-above.select2-drop-active {
-  border-top-color: colors.$kobo-gray-92;
+  border-top-color: colors.$kobo-gray-300;
 }
 
 .select2-results .select2-result-label {
diff --git a/jsapp/scss/stylesheets/partials/_registration.scss b/jsapp/scss/stylesheets/partials/_registration.scss
index 7219dbb6d5..d192b8a735 100644
--- a/jsapp/scss/stylesheets/partials/_registration.scss
+++ b/jsapp/scss/stylesheets/partials/_registration.scss
@@ -14,7 +14,7 @@
   width: 100%;
   min-height: 100%;
   position: relative;
-  color: colors.$kobo-gray-96;
+  color: colors.$kobo-gray-200;
   padding: 20px;
   padding-bottom: 5px;
 
@@ -31,7 +31,7 @@
     margin: 0 auto;
     position: relative;
     max-width: 400px;
-    background: rgba(colors.$kobo-gray-24, 0.8);
+    background: rgba(colors.$kobo-gray-800, 0.8);
     padding: 20px 30px;
     border-radius: 10px;
 
@@ -136,7 +136,7 @@
       color: colors.$kobo-dark-blue;
 
       &.btn-danger {
-        background-color: colors.$kobo-red;
+        background-color: colors.$kobo-mid-red;
         color: colors.$kobo-white;
       }
 
@@ -343,7 +343,7 @@ form.registration--login > p > span.helptext{
   clear: both;
   text-align: center;
   margin: 20px 10px 10px 10px;
-  text-shadow: colors.$kobo-gray-14 0 0 2px; // contrast against photo background
+  text-shadow: colors.$kobo-gray-900 0 0 2px; // contrast against photo background
 
   a {
     color: colors.$kobo-white;
@@ -366,7 +366,7 @@ form.registration--login > p > span.helptext{
 .error-message {
   font-size: variables.$base-font-size;
   color: colors.$kobo-red;
-  background-color: rgba(colors.$kobo-red, 0.075);
+  background-color: rgba(colors.$kobo-mid-red, 0.075);
 }
 
 .registration__credit {
diff --git a/jsapp/scss/stylesheets/partials/_tagsinput_override.scss b/jsapp/scss/stylesheets/partials/_tagsinput_override.scss
index d4272dd628..8cbfdd2954 100644
--- a/jsapp/scss/stylesheets/partials/_tagsinput_override.scss
+++ b/jsapp/scss/stylesheets/partials/_tagsinput_override.scss
@@ -32,7 +32,7 @@ div.tagsinput span.tag {
 
 div.tagsinput input {
   border: none;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
   font-family: $font;
   font-size: 12px;
   margin: 0 5px;
@@ -58,7 +58,7 @@ div.tagsinput span.tag a:before {
 
 ul.ui-autocomplete.ui-widget-content.ui-widget {
   max-width: 680px !important;
-  border: 1px solid colors.$kobo-gray-92;
+  border: 1px solid colors.$kobo-gray-300;
   li {
     padding: 5px;
     background: colors.$kobo-white;
@@ -74,7 +74,7 @@ ul.ui-autocomplete.ui-widget-content.ui-widget {
     }
     a {
       font-weight: normal;
-      color: colors.$kobo-gray-24;
+      color: colors.$kobo-gray-800;
     }
   }
 }
diff --git a/jsapp/scss/stylesheets/partials/form_builder/_card.scss b/jsapp/scss/stylesheets/partials/form_builder/_card.scss
index 22af6ee2a9..665b7f88d6 100644
--- a/jsapp/scss/stylesheets/partials/form_builder/_card.scss
+++ b/jsapp/scss/stylesheets/partials/form_builder/_card.scss
@@ -17,7 +17,7 @@
 
     &.card--error {
         padding: 12px 20px;
-        background-color: rgba(colors.$kobo-red, 0.5);
+        background-color: rgba(colors.$kobo-mid-red, 0.5);
     }
 
     .card__header {
@@ -51,7 +51,7 @@
         position: relative;
 
         &.activated {
-            color: colors.$kobo-gray-40;
+            color: colors.$kobo-gray-700;
         }
         .card__buttons__multioptions {
             cursor: pointer;
@@ -83,16 +83,16 @@
     }
 
     .card__header-title {
-        color: colors.$kobo-gray-40;
+        color: colors.$kobo-gray-700;
 
         &:focus {
-            color: colors.$kobo-gray-24;
+            color: colors.$kobo-gray-800;
           }
 
         // we use placeholder as error message, as empty title is not welcomed
          &::placeholder {
             color: colors.$kobo-red;
-            background-color: rgba(colors.$kobo-red, 0.075);
+            background-color: rgba(colors.$kobo-mid-red, 0.075);
         }
     }
 
@@ -101,7 +101,7 @@
         font-weight: 400;
 
         &::placeholder {
-            color: colors.$kobo-gray-40;
+            color: colors.$kobo-gray-700;
             font-style: italic;
         }
     }
@@ -120,7 +120,7 @@
             position: absolute;
             top: -0.15em;
             left: -9px;
-            color: colors.$kobo-gray-40;
+            color: colors.$kobo-gray-700;
             font-size: 11px;
         }
         &.card--selectquestion {
@@ -152,7 +152,7 @@
     }
 }
 .card--error {
-    background-color: rgba(colors.$kobo-red, 0.5);
+    background-color: rgba(colors.$kobo-mid-red, 0.5);
 }
 
 // ==========================================================================
@@ -186,7 +186,7 @@ $cardIndicatorIconWidth: 21px;
     font-size: 20px;
     line-height: 20px;
     text-align: center;
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
 }
 
 // ==========================================================================
@@ -241,10 +241,10 @@ $cardIndicatorIconWidth: 21px;
     }
 }
 .card__header.settings .card__header--shade {
-    background: rgba(colors.$kobo-gray-40, 0.5);
+    background: rgba(colors.$kobo-gray-700, 0.5);
 }
 .card__header.delete .card__header--shade {
-    background: rgba(colors.$kobo-red, 0.5);
+    background: rgba(colors.$kobo-mid-red, 0.5);
 }
 .card__header.duplicate .card__header--shade {
     background: rgba(colors.$kobo-blue, 0.5);
@@ -268,7 +268,7 @@ $cardIndicatorIconWidth: 21px;
     cursor: pointer;
 
     &.card__buttons__button--gray {
-        color: colors.$kobo-gray-40;
+        color: colors.$kobo-gray-700;
     }
 
     &.card__buttons__button--red {
@@ -284,8 +284,8 @@ $cardIndicatorIconWidth: 21px;
     }
 
     &.card__buttons__button--activated {
-        color: colors.$kobo-gray-40;
-        background-color: colors.$kobo-gray-92;
+        color: colors.$kobo-gray-700;
+        background-color: colors.$kobo-gray-300;
         opacity: 1;
     }
 
diff --git a/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss b/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss
index 36a8a52bf0..a09980a8b5 100644
--- a/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss
+++ b/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss
@@ -36,7 +36,7 @@
 .option-placeholder {
   height: 32px;
   margin-bottom: 10px;
-  border: 2px solid colors.$kobo-gray-65;
+  border: 2px solid colors.$kobo-gray-500;
   border-radius: 4px;
   margin-right: 25px;
   margin-left: 5px;
@@ -89,7 +89,7 @@
     font-weight: 600;
     font-size: 11px;
     font-family: $font;
-    background-color: colors.$kobo-gray-92;
+    background-color: colors.$kobo-gray-300;
     padding: 2px;
     margin: 2px;
     width: 25%;
@@ -102,7 +102,7 @@
       display: inline-block;
       width: 40%;
       padding-left: 4px;
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
     }
 
     span {
@@ -111,7 +111,7 @@
       float: right;
       width: 60%;
       padding-right: 4px;
-      color: colors.$kobo-gray-40;
+      color: colors.$kobo-gray-700;
       overflow-wrap: break-word;
       cursor: text;
     }
diff --git a/jsapp/scss/stylesheets/partials/form_builder/_card_settings.scss b/jsapp/scss/stylesheets/partials/form_builder/_card_settings.scss
index 22140c9712..f0e8203024 100644
--- a/jsapp/scss/stylesheets/partials/form_builder/_card_settings.scss
+++ b/jsapp/scss/stylesheets/partials/form_builder/_card_settings.scss
@@ -32,7 +32,7 @@
   @extend %card__settings__tabs__tab;
 
   &.card__settings__tabs__tab--active {
-    background: colors.$kobo-gray-92;
+    background: colors.$kobo-gray-300;
     font-weight: 600;
   }
 }
@@ -49,7 +49,7 @@
   margin-bottom: 3px;
 
   .k-icon {
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
     margin-right: 5px;
     font-size: 21px;
     display: inline-block;
@@ -99,7 +99,7 @@
     width: 85%;
     background: inherit;
     border-width: 1px;
-    border-color: colors.$kobo-gray-92;
+    border-color: colors.$kobo-gray-300;
     border-style: solid;
     padding: 4px 10px;
     font-size: 15px;
@@ -127,7 +127,7 @@
 }
 
 .card__settings-close {
-  background: colors.$kobo-gray-65;
+  background: colors.$kobo-gray-500;
   position: absolute;
   right: 6px;
   top: 6px;
@@ -162,8 +162,8 @@
     }
 
     .card__buttons__button--settings {
-      color: colors.$kobo-gray-40;
-      background-color: colors.$kobo-gray-92;
+      color: colors.$kobo-gray-700;
+      background-color: colors.$kobo-gray-300;
     }
   }
 }
@@ -173,7 +173,7 @@
 // ==========================================================================
 
 .settings__hxl {
-    background: colors.$kobo-gray-96;
+    background: colors.$kobo-gray-200;
     display: table-row;
     .hxlTag {
       width: 120px;
@@ -187,7 +187,7 @@
     .select2-container-multi {
         vertical-align: top;
         display: table-cell;
-        border: 1px solid colors.$kobo-gray-65;
+        border: 1px solid colors.$kobo-gray-500;
         padding: 2px;
 
         .select2-choices {
@@ -198,14 +198,14 @@
             .select2-search-choice {
               border-radius: 5px;
               font-weight: normal;
-              background: colors.$kobo-gray-92;
-              color: colors.$kobo-gray-24;
+              background: colors.$kobo-gray-300;
+              color: colors.$kobo-gray-800;
               padding-left: 5px;
               padding-right: 18px;
               .select2-search-choice-close {
                 left: auto;
                 right: 3px;
-                color: colors.$kobo-gray-40;
+                color: colors.$kobo-gray-700;
                 &:before {
                   content: '\00d7';
                 }
diff --git a/jsapp/scss/stylesheets/partials/form_builder/_common.scss b/jsapp/scss/stylesheets/partials/form_builder/_common.scss
index e11e61ef0a..925b28dfa5 100644
--- a/jsapp/scss/stylesheets/partials/form_builder/_common.scss
+++ b/jsapp/scss/stylesheets/partials/form_builder/_common.scss
@@ -32,8 +32,8 @@
         margin-left: -8px;
     }
     &:before {
-        border-color: rgba(colors.$kobo-gray-65, 0);
-        border-bottom-color: colors.$kobo-gray-65;
+        border-color: rgba(colors.$kobo-gray-500, 0);
+        border-bottom-color: colors.$kobo-gray-500;
         border-width: 9px;
         margin-left: -9px;
     }
diff --git a/jsapp/scss/stylesheets/partials/form_builder/_group.scss b/jsapp/scss/stylesheets/partials/form_builder/_group.scss
index a9f0aa794d..ab678f2e99 100644
--- a/jsapp/scss/stylesheets/partials/form_builder/_group.scss
+++ b/jsapp/scss/stylesheets/partials/form_builder/_group.scss
@@ -4,13 +4,13 @@
 // Groups
 // ==========================================================================
 
-$formbuilder-group-bg: colors.$kobo-gray-96;
+$formbuilder-group-bg: colors.$kobo-gray-200;
 
 .group {
     padding: 4px 10px;
     margin-bottom: 15px;
     background-color: $formbuilder-group-bg;
-    border: 1px solid colors.$kobo-gray-65;
+    border: 1px solid colors.$kobo-gray-500;
     font-size: 13px;
 
     // make space for the .btn--addrow on the left
@@ -24,7 +24,7 @@ $formbuilder-group-bg: colors.$kobo-gray-96;
 }
 
 .group__header {
-    border-bottom: 1px solid colors.$kobo-gray-65;
+    border-bottom: 1px solid colors.$kobo-gray-500;
     position: relative;
     margin: -4px -10px 0;
     padding: 20px 12px;
@@ -88,7 +88,7 @@ $formbuilder-group-bg: colors.$kobo-gray-96;
 .group__header__icon,
 .group__header__icon .k-icon,
 .group__caret {
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   display: inline-block;
   vertical-align: middle;
 }
@@ -104,7 +104,7 @@ $formbuilder-group-bg: colors.$kobo-gray-96;
   cursor: pointer;
 
   &:hover {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 }
 
diff --git a/jsapp/scss/stylesheets/partials/form_builder/_misc.scss b/jsapp/scss/stylesheets/partials/form_builder/_misc.scss
index ab9a41c1f4..16213449ed 100644
--- a/jsapp/scss/stylesheets/partials/form_builder/_misc.scss
+++ b/jsapp/scss/stylesheets/partials/form_builder/_misc.scss
@@ -6,7 +6,7 @@
   border: $cardBorderStyle;
   padding: 20px;
   background: colors.$kobo-white;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   font-weight: 600;
   font-style: italic;
   font-size: 13px;
@@ -108,5 +108,5 @@ code input[type="text"] {
 
 .survey-editor__message {
   text-align: center;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 }
diff --git a/jsapp/scss/stylesheets/partials/form_builder/_row_questiontypes.scss b/jsapp/scss/stylesheets/partials/form_builder/_row_questiontypes.scss
index fbfbe37c3b..eb4d595b4e 100644
--- a/jsapp/scss/stylesheets/partials/form_builder/_row_questiontypes.scss
+++ b/jsapp/scss/stylesheets/partials/form_builder/_row_questiontypes.scss
@@ -55,7 +55,7 @@
   position: absolute;
   top: -3px;
   right: 1px;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   background: transparent;
   border: 0 none;
   font-family: $font;
@@ -66,7 +66,7 @@
   cursor: pointer;
 
   &:hover {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-gray-800;
   }
 }
 
@@ -122,7 +122,7 @@ input.row__questiontypes__new-question-name {
   font-family: $font;
   font-weight: 600;
   cursor: pointer;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
 
   .k-icon {
     margin-right: 6px;
diff --git a/jsapp/scss/stylesheets/partials/form_builder/_settings_skiplogic.scss b/jsapp/scss/stylesheets/partials/form_builder/_settings_skiplogic.scss
index 24cf81fe09..338746dbbd 100644
--- a/jsapp/scss/stylesheets/partials/form_builder/_settings_skiplogic.scss
+++ b/jsapp/scss/stylesheets/partials/form_builder/_settings_skiplogic.scss
@@ -25,7 +25,7 @@
   width: 10%;
   margin-right: 2%;
   font-weight: 600;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
 }
 
 .skiplogic__expressionselect--no-response-value {
@@ -45,13 +45,13 @@ input[type=text].skiplogic__responseval, select.skiplogic__responseval {
   width: 25%;
   font-weight: normal;
   display: inline-block;
-  border-bottom: 1px solid colors.$kobo-gray-65;
+  border-bottom: 1px solid colors.$kobo-gray-500;
 }
 
 input[type=text].skiplogic__responseval {
   border-radius: 0;
   border: none;
-  border-bottom: 1px solid colors.$kobo-gray-65;
+  border-bottom: 1px solid colors.$kobo-gray-500;
   padding: 1px;
   height: 30px;
   vertical-align: bottom;
@@ -128,7 +128,7 @@ select.skiplogic__delimselect {
   background: transparent;
   border-radius: 0px !important;
   border: none;
-  border-bottom: 1px solid colors.$kobo-gray-65;
+  border-bottom: 1px solid colors.$kobo-gray-500;
   padding: 4px 2px;
   font-size: 13px;
   font-weight: 400;
@@ -143,12 +143,12 @@ select.skiplogic__delimselect {
 
 .skiplogic__criterialist {
   .select2-container .select2-choice {
-    border-bottom: 1px solid colors.$kobo-gray-65;
+    border-bottom: 1px solid colors.$kobo-gray-500;
   }
 
   .select2-dropdown-open.select2-drop-above .select2-choice,
   .select2-dropdown-open.select2-drop-above .select2-choices {
-    border-bottom: 1px solid colors.$kobo-gray-65;
+    border-bottom: 1px solid colors.$kobo-gray-500;
     border-radius: 0px;
   }
 }
diff --git a/jsapp/scss/stylesheets/partials/form_builder/_survey_row.scss b/jsapp/scss/stylesheets/partials/form_builder/_survey_row.scss
index fdd93f2ecf..8652fdbb7e 100644
--- a/jsapp/scss/stylesheets/partials/form_builder/_survey_row.scss
+++ b/jsapp/scss/stylesheets/partials/form_builder/_survey_row.scss
@@ -78,7 +78,7 @@
 }
 
 .scorecell__col {
-  border: 1px solid colors.$kobo-gray-65;
+  border: 1px solid colors.$kobo-gray-500;
   border-width: 1px 0 0.5px 1px;
   text-align: center;
   padding: 0;
@@ -93,7 +93,7 @@
   }
 }
 
-$scorebordercolor: colors.$kobo-gray-65;
+$scorebordercolor: colors.$kobo-gray-500;
 
 tr:first-child .scorelabel {
   border-top-width: 1px;
@@ -107,11 +107,11 @@ tr:first-child .scorelabel {
   border-left-color: $scorebordercolor;
   border-right-width: 1px;
   border-right-style: solid;
-  border-right-color: colors.$kobo-gray-92;
+  border-right-color: colors.$kobo-gray-300;
 }
 
 .scorelabel, .scorecell__radio {
-  border-bottom: 1px dotted colors.$kobo-gray-92;
+  border-bottom: 1px dotted colors.$kobo-gray-300;
   padding: 4px 6px;
 }
 
@@ -147,11 +147,11 @@ tr:last-child {
 }
 
 tr:hover .scorecell__radio {
-  background-color: colors.$kobo-gray-96;
+  background-color: colors.$kobo-gray-200;
 }
 
 tr .scorecell__radio:hover {
-  background-color: colors.$kobo-gray-96;
+  background-color: colors.$kobo-gray-200;
 }
 
 .rank__rows {
@@ -181,7 +181,7 @@ tr .scorecell__radio:hover {
 
 .rank_items__constraint_explanation {
   font-size: 10px;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
   text-decoration: underline;
 }
 
@@ -197,13 +197,13 @@ tr .scorecell__radio:hover {
 
 .rank_items__item, .rank_items__level {
   border: 1px solid;
-  border-color: colors.$kobo-gray-65;
+  border-color: colors.$kobo-gray-500;
   border-radius: 4px;
 }
 
 .rank_items__constraint_message {
   font-size: 92%;
-  color: colors.$kobo-gray-24;
+  color: colors.$kobo-gray-800;
   font-style: italic;
 
   &:before {
@@ -215,7 +215,7 @@ tr .scorecell__radio:hover {
       content: '';
     }
 
-    color: colors.$kobo-gray-40;
+    color: colors.$kobo-gray-700;
   }
 
   div {
@@ -239,15 +239,15 @@ tr .scorecell__radio:hover {
 
 .scorecell__name {
   margin: 0 0 -1px 0;
-  background-color: colors.$kobo-gray-96;
-  color: colors.$kobo-gray-40;
+  background-color: colors.$kobo-gray-200;
+  color: colors.$kobo-gray-700;
   line-height: 15px;
   font-size: 9px;
 }
 
 .scorecell__name, .scorelabel__name {
   display: block;
-  border-bottom: 1px dotted colors.$kobo-gray-92;
+  border-bottom: 1px dotted colors.$kobo-gray-300;
 
   br {
     display: none;
@@ -293,7 +293,7 @@ tr .scorecell__radio:hover {
 }
 
 .kobomatrix-warning {
-  color: colors.$kobo-gray-55;
+  color: colors.$kobo-gray-600;
   position: absolute;
   top: 0;
   right: 5px + $s-fb-row-locking-icons-width + $s-fb-row-buttons-width;
@@ -305,11 +305,11 @@ tr .scorecell__radio:hover {
 
 .scorecell__name, .scorelabel__name, .rank_items__name {
   font-size: 90%;
-  color: colors.$kobo-gray-40;
+  color: colors.$kobo-gray-700;
 
   &.prelim {
     font-style: italic;
-    color: colors.$kobo-gray-92;
+    color: colors.$kobo-gray-300;
   }
 }
 
@@ -344,7 +344,7 @@ $nested-btn--addrow-height: 24px;
   top: -20px;
 
   .k-icon {
-    background-color: colors.$kobo-gray-65;
+    background-color: colors.$kobo-gray-500;
     display: block;
     width: 24px;
     font-size: 21px;