diff --git a/app/javascript/styles/chinwag_light/variables.scss b/app/javascript/styles/chinwag_light/variables.scss
index 2a82956ed..9729e1bf6 100644
--- a/app/javascript/styles/chinwag_light/variables.scss
+++ b/app/javascript/styles/chinwag_light/variables.scss
@@ -18,6 +18,11 @@ $base-overlay-background: $black !default;
 $base-border-color: $white !default;
 $simple-background-color: $white !default;
 $primary-text-color: $black !default;
+$darker-text-color: rgba($primary-text-color, 0.7) !default;
+$highlight-text-color: $classic-highlight-color !default;
+$inverted-text-color: $black !default;
+$lighter-text-color: rgba($inverted-text-color, 0.7) !default;
+$action-button-color: #8d9ac2;
 $valid-value-color: $success-green !default;
 $error-value-color: $error-red !default;
 
@@ -28,6 +33,18 @@ $ui-primary-color: $classic-primary-color !default;            // Lighter
 $ui-secondary-color: $classic-secondary-color !default;        // Lightest
 $ui-highlight-color: $classic-highlight-color !default;        // Vibrant
 
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
 // Buttons colors
 $status-buttons-base-color: $ui-primary-color;
 $status-buttons-active-color: $classic-highlight-color;