Change to numeric scales for colours

tailwind.config.js

@@ -3,28 +3,34 @@ defaultTheme = require('tailwindcss/defaultTheme')()
 module.exports = {
   theme: {
     colors: {
-     'inherit': 'inherit',
+      'inherit': 'inherit',
       'black': '#22292f',
-      'blue': '#018dc7',
+      'blue': {
-      'blue-dark': '#0e68a7',
+        '1': '#29aae1',
-      'blue-darker': '#004f86',
+        '2': '#018dc7',
-      'blue-light': '#29aae1',
+        '3': '#0e68a7',
+        '4': '#004f86',
+      },
       'green': '#398002',
-      'grey': '#B7B7B7',
+      'grey': {
-      'grey-dark': '#888888',
+        '1': '#f8fafc',
-      'grey-darker': '#555555',
+        '2': '#eee',
-      'grey-darkest': '#333333',
+        '3': '#ddd',
-      'grey-light': '#DDDDDD',
+        '4': '#b7b7b7',
-      'grey-lighter': '#eeeeee',
+        '5': '#888',
-      'grey-lightest': '#f8fafc',
+        '6': '#555',
-      'orange': '#FA9903',
+        '7': '#333',
-      'orange-light': '#FFB401',
+      },
-      'purple': '#991FAF',
+      'orange': {
-      'red-dark': '#cc1f1a',
+        '1': '#fa9903',
-      'teal': '#3F7B8F',
+        '2': '#ffb401',
+      },
+      'purple': '#991faf',
+      'red': '#cc1f1a',
+      'teal': '#3f7b8f',
       'transparent': 'transparent',
-      'white': '#ffffff',
+      'white': '#fff',
-      'yellow-lightest': '#FAF8DF'
+      'yellow': '#faf8df'
     },
     extend: {
       borderWidth: {