diff --git a/apps/www/README.md b/apps/www/README.md
index ab4de38784c..5505fe5a8a0 100644
--- a/apps/www/README.md
+++ b/apps/www/README.md
@@ -16,7 +16,6 @@ cd supabase
 npm install
 npm run dev
 
-
 # visit website
 http://localhost:3000
 ```
diff --git a/packages/config/default-colors.js b/packages/config/default-colors.js
index 16352a83344..32c0f2ff656 100644
--- a/packages/config/default-colors.js
+++ b/packages/config/default-colors.js
@@ -46,18 +46,18 @@ module.exports = {
     scale12: 'var(--colors-slate12)',
   },
   scaleA: {
-    scaleA1: 'var(--colors-slatea1)',
-    scaleA2: 'var(--colors-slatea2)',
-    scaleA3: 'var(--colors-slatea3)',
-    scaleA4: 'var(--colors-slatea4)',
-    scaleA5: 'var(--colors-slatea5)',
-    scaleA6: 'var(--colors-slatea6)',
-    scaleA7: 'var(--colors-slatea7)',
-    scaleA8: 'var(--colors-slatea8)',
-    scaleA9: 'var(--colors-slatea9)',
-    scaleA10: 'var(--colors-slatea10)',
-    scaleA11: 'var(--colors-slatea11)',
-    scaleA12: 'var(--colors-slatea12)',
+    scaleA1: 'var(--colors-slateA1)',
+    scaleA2: 'var(--colors-slateA2)',
+    scaleA3: 'var(--colors-slateA3)',
+    scaleA4: 'var(--colors-slateA4)',
+    scaleA5: 'var(--colors-slateA5)',
+    scaleA6: 'var(--colors-slateA6)',
+    scaleA7: 'var(--colors-slateA7)',
+    scaleA8: 'var(--colors-slateA8)',
+    scaleA9: 'var(--colors-slateA9)',
+    scaleA10: 'var(--colors-slateA10)',
+    scaleA11: 'var(--colors-slateA11)',
+    scaleA12: 'var(--colors-slateA12)',
   },
   scaleDark: {
     scale1: 'var(--colors-gray1)',
@@ -74,17 +74,17 @@ module.exports = {
     scale12: 'var(--colors-gray12)',
   },
   scaleADark: {
-    scaleA1: 'var(--colors-graya1)',
-    scaleA2: 'var(--colors-graya2)',
-    scaleA3: 'var(--colors-graya3)',
-    scaleA4: 'var(--colors-graya4)',
-    scaleA5: 'var(--colors-graya5)',
-    scaleA6: 'var(--colors-graya6)',
-    scaleA7: 'var(--colors-graya7)',
-    scaleA8: 'var(--colors-graya8)',
-    scaleA9: 'var(--colors-graya9)',
-    scaleA10: 'var(--colors-graya10)',
-    scaleA11: 'var(--colors-graya11)',
-    scaleA12: 'var(--colors-graya12)',
+    scaleA1: 'var(--colors-grayA1)',
+    scaleA2: 'var(--colors-grayA2)',
+    scaleA3: 'var(--colors-grayA3)',
+    scaleA4: 'var(--colors-grayA4)',
+    scaleA5: 'var(--colors-grayA5)',
+    scaleA6: 'var(--colors-grayA6)',
+    scaleA7: 'var(--colors-grayA7)',
+    scaleA8: 'var(--colors-grayA8)',
+    scaleA9: 'var(--colors-grayA9)',
+    scaleA10: 'var(--colors-grayA10)',
+    scaleA11: 'var(--colors-grayA11)',
+    scaleA12: 'var(--colors-grayA12)',
   },
 }
diff --git a/packages/config/ui.config.js b/packages/config/ui.config.js
index 14b7579caec..18b5877136b 100644
--- a/packages/config/ui.config.js
+++ b/packages/config/ui.config.js
@@ -53,7 +53,7 @@ function generateColorClasses() {
   colors.map((x) => {
     for (let index = 0; index < 12; index++) {
       const step = index + 1
-      mappedColors[x][step * 100] = `var(--colors-${x.toLowerCase()}${step})`
+      mappedColors[x][step * 100] = `var(--colors-${x}${step})`
 
       if (
         fixedOptions.some(function (v) {