diff --git a/tools/ui-components/tailwind.config.js b/tools/ui-components/tailwind.config.js
index 399f2b76e4..20923b711b 100644
--- a/tools/ui-components/tailwind.config.js
+++ b/tools/ui-components/tailwind.config.js
@@ -4,7 +4,39 @@ module.exports = {
   theme: {
     colors: {
       // Configure the color palette here
-      darkGreen: '#00471b'
+      // Layout Colors
+      gray00: '#ffffff',
+      gray05: '#f5f6f7',
+      gray10: '#dfdfe2',
+      gray15: '#d0d0d5',
+      gray45: '#858591',
+      gray75: '#3b3b4f',
+      gray80: '#2a2a40',
+      gray85: '#1b1b32',
+      gray90: '#0a0a23',
+      // Accent Colors - Primary
+      blue: '#99c9ff',
+      green: '#acd157',
+      purple: '#dbb8ff',
+      yellow: '#f1be32',
+      // Accent Colors - Secondary
+      darkBlue: '#002ead',
+      darkGreen: '#00471b',
+      darkPurple: '#5a01a7',
+      darkYellow: '#4d3800',
+      // Colors in variables.css
+      blueMid: '#198eee',
+      blueTranslucent: 'rgba(0, 46, 173, 0.3)',
+      blueTranslucentDark: 'rgba(153, 201, 255, 0.3)',
+      editorBackgroundDark: '#2a2b40',
+      loveDark: '#f82153',
+      darkRed: '#850000',
+      editorBackground: '#fffffe',
+      love: '#f8577c',
+      purpleMid: '#9400d3',
+      red: '#ffadad',
+      yellowGold: '#ffbf00',
+      yellowLight: '#ffc300'
     }
   },
   variants: {