diff --git a/minting-dapp/postcss.config.js b/minting-dapp/postcss.config.js
index ddc009c78..7fbaf2ac8 100644
--- a/minting-dapp/postcss.config.js
+++ b/minting-dapp/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {}
-    }
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
 };
\ No newline at end of file
diff --git a/minting-dapp/src/styles/components/general.scss b/minting-dapp/src/styles/components/general.scss
index 20edc72f8..288e7eb87 100644
--- a/minting-dapp/src/styles/components/general.scss
+++ b/minting-dapp/src/styles/components/general.scss
@@ -3,10 +3,9 @@ body {
   @apply min-h-screen;
 
   @apply font-sans;
-  @apply text-neutral-800;
 
   // Simple background with color gradient
-  @apply bg-gradient-to-b from-neutral-100 via-neutral-100 to-neutral-200;
+  @apply bg-gradient-to-b from-page-from_bg via-page-from_bg to-page-to_bg;
 
   // Fullscreen background image example
   //background-image: url('../../images/background.jpg');
@@ -15,10 +14,11 @@ body {
 
 a, a:link, a:visited {
   @apply font-semibold;
-  @apply text-primary-600;
+  @apply text-links-txt;
 
   &:hover {
     @apply underline;
+    @apply text-links-hover_txt;
   }
 }
 
@@ -45,11 +45,10 @@ span.emoji {
   @apply rounded-lg;
   @apply p-3;
   
-  @apply text-sm;
-  @apply bg-error-50;
-  @apply border border-error-200;
+  @apply text-error-txt text-sm;
+  @apply bg-error-bg;
+  @apply border border-error-border;
   @apply shadow;
-  @apply text-error-500;
 
   &::before {
     content: 'Error';
@@ -64,14 +63,15 @@ span.emoji {
     @apply px-2 py-1;
     @apply rounded-md;
 
-    @apply text-xs;
-
     @apply font-semibold;
-    @apply text-errortxt;
-    @apply bg-error-500;
+    @apply text-btn_error-txt text-xs;
+    @apply bg-btn_error-bg;
+    @apply border-btn_error-border;
 
     &:hover {
-      @apply bg-error-400;
+      @apply text-btn_error-hover_txt;
+      @apply bg-btn_error-hover_bg;
+      @apply border-btn_error-hover_border;
     }
   }
 }
@@ -82,21 +82,26 @@ button {
   @apply rounded-full;
   
   @apply font-semibold;
-  @apply bg-popupsbg;
-  @apply border border-neutral-200;
+  @apply text-btn-txt;
+  @apply bg-btn-bg;
+  @apply border border-btn-border;
   @apply shadow-sm;
 
   &:hover {
-    @apply bg-neutral-100;
+    @apply text-btn-hover_txt;
+    @apply bg-btn-hover_bg;
+    @apply border-btn-hover_border;
   }
 
   &.primary {
-    @apply text-primarytxt;
-    @apply bg-primary-500;
-    @apply border;
+    @apply text-btn_primary-txt;
+    @apply bg-btn_primary-bg;
+    @apply border-btn_primary-border;
 
     &:hover {
-      @apply bg-primary-600;
+      @apply text-btn_primary-hover_txt;
+      @apply bg-btn_primary-hover_bg;
+      @apply border-btn_primary-hover_border;
     }
 
     &:disabled {
@@ -115,15 +120,16 @@ input[type=text] {
   @apply rounded-full;
   
   @apply font-mono font-semibold;
-  @apply text-primary-600;
-  @apply bg-popupsbg;
-  @apply border border-neutral-200;
+  @apply text-txt_input-txt;
+  @apply bg-txt_input-bg;
+  @apply border border-txt_input-border;
   @apply shadow-sm;
   @apply outline-none;
 
   &:focus {
-    @apply bg-neutral-50;
-    @apply border-primary-300;
+    @apply text-txt_input-focus_txt;
+    @apply bg-txt_input-focus_bg;
+    @apply border-txt_input-focus_border;
   }
 
   &:disabled {
@@ -139,5 +145,5 @@ label {
   @apply mt-4 mb-1 ml-1;
 
   @apply font-semibold;
-  @apply text-sm text-primary-600;
+  @apply text-label text-sm;
 }
diff --git a/minting-dapp/src/styles/components/minting-dapp.scss b/minting-dapp/src/styles/components/minting-dapp.scss
index babf3cd9b..790a3d45b 100644
--- a/minting-dapp/src/styles/components/minting-dapp.scss
+++ b/minting-dapp/src/styles/components/minting-dapp.scss
@@ -9,8 +9,8 @@
     @apply px-4 py-6;
     @apply rounded-lg;
     
-    @apply bg-popupsbg;
-    @apply border border-neutral-50;
+    @apply text-popups-txt;
+    @apply bg-popups-bg;
     @apply shadow;
 
     .use-block-explorer {
@@ -25,7 +25,7 @@
         @apply mx-auto my-3;
         @apply w-12;
 
-        @apply border-t border-neutral-300;
+        @apply border-t-2 border-popups-internal_border;
       }
     }
 
@@ -35,7 +35,7 @@
 
       h2 {
         @apply font-semibold;
-        @apply text-primary-600 text-xl text-center;
+        @apply text-titles text-xl text-center;
       }
 
       p {
@@ -47,8 +47,8 @@
         @apply mt-4;
         @apply p-3;
         
-        @apply text-sm;
-        @apply bg-primary-100;
+        @apply text-wl_message-txt text-sm;
+        @apply bg-wl_message-bg;
       }
 
       input {
@@ -59,22 +59,23 @@
       button {
         @apply rounded-b-lg;
         @apply rounded-t-none;
+        @apply border-t-0;
       }
     }
   }
 
   .collection-not-ready {
+    @apply flex items-center justify-center;
     @apply px-6 py-4;
     @apply rounded-lg;
 
-    @apply text-sm;
-    @apply bg-popupsbg;
-    @apply border border-neutral-50;
+    @apply text-popups-txt text-sm;
+    @apply bg-popups-bg;
     @apply shadow;
 
     .spinner {
       @apply inline;
-      @apply -ml-1 mr-3 h-8 w-8 text-primary-500;
+      @apply -ml-1 mr-3 h-8 w-8 text-loading_spinner;
       @apply animate-spin;
     }
   }
@@ -84,9 +85,8 @@
     @apply rounded-lg;
 
     @apply font-mono;
-    @apply text-sm;
-    @apply bg-popupsbg;
-    @apply border border-neutral-50;
+    @apply text-popups-txt text-sm;
+    @apply bg-popups-bg;
     @apply shadow;
 
     & > * {
@@ -94,7 +94,7 @@
       @apply px-6 py-4;
 
       .label {
-        @apply text-xs text-primary-600;
+        @apply text-xs text-label;
       }
     }
 
@@ -102,7 +102,7 @@
       @apply sm:col-span-2;
       @apply overflow-hidden;
 
-      @apply border-b border-neutral-200;
+      @apply border-b border-popups-internal_border;
 
       .address {
         @apply w-full;
@@ -121,7 +121,7 @@
       }
 
       &.supply {
-        @apply border-b sm:border-b-0 sm:border-r border-neutral-200;
+        @apply border-b sm:border-b-0 sm:border-r border-popups-internal_border;
       }
     }
   }
@@ -130,9 +130,8 @@
     @apply rounded-lg;
     @apply px-6 py-4;
 
-    @apply text-center;
-    @apply bg-popupsbg;
-    @apply border border-neutral-50;
+    @apply text-popups-txt text-center;
+    @apply bg-popups-bg;
     @apply shadow;
 
     &.cannot-mint .emoji {
@@ -142,10 +141,10 @@
     }
 
     &.not-mainnet {
-      @apply bg-warning-400;
-      @apply border-warning-500;
+      @apply text-warning-txt;
+      @apply bg-warning-bg;
+      @apply border border-warning-border;
 
-      @apply text-warningtxt;
 
       .small {
         @apply block;
@@ -168,14 +167,14 @@
     @apply rounded-lg;
     @apply overflow-hidden;
 
-    @apply text-center;
-    @apply bg-popupsbg;
+    @apply text-popups-txt text-center;
+    @apply bg-popups-bg;
     @apply shadow;
 
     .preview {
       @apply p-8;
 
-      @apply bg-primary-200;
+      @apply bg-token_preview;
       
       img {
         @apply m-auto;
@@ -193,7 +192,7 @@
       @apply w-full;
 
       &:not(:last-child) {
-        @apply border-b border-neutral-200;
+        @apply border-b border-popups-internal_border;
       }
     }
 
@@ -206,7 +205,7 @@
       }
 
       .decrease, .mint-amount {
-        @apply border-r border-neutral-200;
+        @apply border-r border-popups-internal_border;
       }
 
       .mint-amount {
@@ -214,7 +213,7 @@
         @apply w-full;
 
         @apply font-semibold;
-        @apply text-primary-600;
+        @apply text-label text-lg;
       }
 
       .primary {
diff --git a/minting-dapp/tailwind.config.js b/minting-dapp/tailwind.config.js
index 661099a97..703ab1d87 100644
--- a/minting-dapp/tailwind.config.js
+++ b/minting-dapp/tailwind.config.js
@@ -1,25 +1,87 @@
 const colors = require('tailwindcss/colors');
 
 module.exports = {
-    mode: 'jit',
-    content: [
-        './src/**/*.tsx',
-        './public/index.html',
-    ],
-    theme: {
-        extend: {
-            colors: {
-                popupsbg: colors.white,
-                neutral: colors.slate,
-                primary: colors.indigo,
-                primarytxt: colors.white,
-                warning: colors.yellow,
-                warningtxt: colors.black,
-                error: colors.red,
-                errortxt: colors.white,
-            },
+  mode: 'jit',
+  content: [
+    './src/**/*.tsx',
+    './public/index.html',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // General
+        page: {
+          from_bg: colors.slate[100],
+          to_bg: colors.slate[200],
         },
+        titles: colors.indigo[600],
+        links: {
+          txt: colors.indigo[600],
+          hover_txt: colors.indigo[700],
+        },
+        loading_spinner: colors.indigo[500],
+        popups: {
+          bg: colors.white,
+          txt: colors.slate[800],
+          internal_border: colors.slate[200],
+        },
+        warning: {
+          txt: colors.slate[800],
+          bg: colors.yellow[400],
+          border: colors.yellow[500],
+        },
+        error: {
+          txt: colors.red[500],
+          bg: colors.red[50],
+          border: colors.red[200],
+        },
+
+        // Inputs
+        btn: {
+          txt: colors.slate[800],
+          bg: colors.white,
+          border: colors.slate[200],
+          hover_txt: colors.slate[800],
+          hover_bg: colors.slate[100],
+          hover_border: colors.slate[200],
+        },
+        btn_primary: {
+          txt: colors.white,
+          bg: colors.indigo[500],
+          border: colors.indigo[500],
+          hover_txt: colors.white,
+          hover_bg: colors.indigo[600],
+          hover_border: colors.indigo[600],
+        },
+        btn_error: {
+          txt: colors.white,
+          bg: colors.red[500],
+          border: colors.red[500],
+          hover_txt: colors.white,
+          hover_bg: colors.red[600],
+          hover_border: colors.red[600],
+        },
+        label: colors.indigo[600],
+        txt_input: {
+          txt: colors.indigo[600],
+          bg: colors.white,
+          border: colors.slate[200],
+          focus_txt: colors.indigo[600],
+          focus_bg: colors.slate[50],
+          focus_border: colors.indigo[300],
+        },
+        
+        // Whitelist proof widget
+        wl_message: {
+          txt: colors.slate[800],
+          bg: colors.indigo[100],
+        },
+
+        // Mint widget
+        token_preview: colors.indigo[200],
+      },
     },
-    variants: {},
-    plugins: [],
+  },
+  variants: {},
+  plugins: [],
 };