diff --git a/src/components/DrupalMessage.vue b/src/components/DrupalMessage.vue
index 90792ce..e2db995 100644
--- a/src/components/DrupalMessage.vue
+++ b/src/components/DrupalMessage.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
     <div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="classes">
-      <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
+      <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-30 mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
       <slot></slot>
     </div>
   </div>
@@ -16,13 +16,13 @@ export default {
   computed: {
     classes: function () {
       return {
-        status: 'border-green-light text-green-dark bg-green-lighter',
+        status: 'border-green-20 text-green-40 bg-green-10',
       }[this.type]
     },
 
     wrapperClasses: function () {
       return {
-        status: 'bg-green',
+        status: 'bg-green-30',
       }[this.type]
     },
   }
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index 1de27f5..fadb84d 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -2,7 +2,7 @@
   <div>
     <button
       type="button"
-      class="w-full p-3 block sm:hidden bg-blue-light text-sm text-grey-darker text-left focus:outline-none"
+      class="w-full p-3 block sm:hidden bg-blue-10 text-sm text-grey-60 text-left focus:outline-none"
       @click="open = !open"
     >
       <div class="flex items-center justify-between">
@@ -25,7 +25,7 @@
           >
             <a
               class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
-              :class="[ index == activeTab ? 'bg-white' : 'bg-blue-light hover:bg-white' ]"
+              :class="[ index == activeTab ? 'bg-white' : 'bg-blue-10 hover:bg-white' ]"
               :href="link.href"
             >
               {{ link.title }}
diff --git a/src/components/SidebarBlock.vue b/src/components/SidebarBlock.vue
index f9e7e1a..1ca4c9c 100644
--- a/src/components/SidebarBlock.vue
+++ b/src/components/SidebarBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-grey-lightest p-4 mb-4">
+  <div class="bg-grey-10 p-4 mb-4">
     <slot></slot>
   </div>
 </template>
diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue
index 1655fbf..41bb6b0 100644
--- a/src/components/Welcome.vue
+++ b/src/components/Welcome.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bg-blue-dark">
+    <div class="bg-blue-30">
       <div class="py-4 text-white">
         <div id="header" class="xl:max-w-6xl mx-auto px-4 relative">
           <div class="flex flex-col-reverse">
@@ -26,8 +26,8 @@
         <drupal-message type="status">
           <p>
             A Bartik clone, built with
-            <a href="https://vuejs.org" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Vue.js</a>
-            and <a href="https://tailwindcss.com" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Tailwind CSS</a>.
+            <a href="https://vuejs.org" class="text-blue-30 hover:text-blue-20 no-underline border-b border-dotted hover:border-solid border-blue-30">Vue.js</a>
+            and <a href="https://tailwindcss.com" class="text-blue-30 hover:text-blue-20 no-underline border-b border-dotted hover:border-solid border-blue-30">Tailwind CSS</a>.
           </p>
         </drupal-message>
 
@@ -48,13 +48,13 @@
 
           <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6 -mb-4">
             <sidebar-block>
-              <h2 class="font-serif font-normal text-base text-grey-darkest border-b border-solid border-grey-light mb-3">Search</h2>
+              <h2 class="font-serif font-normal text-base text-grey-60 border-b border-solid border-grey-30 mb-3">Search</h2>
 
               <div>
                 <form action="#" class="flex">
-                  <input type="text" class="border border-solid border-grey p-2 w-full xl:w-auto">
+                  <input type="text" class="border border-solid border-grey-40 p-2 w-full xl:w-auto">
 
-                  <button type="submit" class="bg-grey-lighter px-3 rounded-full border-b border-solid border-grey-dark ml-2 flex-none">
+                  <button type="submit" class="bg-grey-20 px-3 rounded-full border-b border-solid border-grey-50 ml-2 flex-none">
                     <img src="img/loupe.svg" class="block">
                   </button>
                 </form>
@@ -67,7 +67,7 @@
 
     <div id="footer" class="text-xs text-white">
       <div class="xl:max-w-6xl mx-auto px-4 pt-16 pb-4">
-        <div class="border-t border-solid border-grey-darkest pt-6 -mb-6">
+        <div class="border-t border-solid border-grey-60 pt-6 -mb-6">
           <div class="mb-6">
             <p><a href="#0">Contact</a></p>
           </div>
@@ -114,11 +114,11 @@ export default {
     @apply underline
 
 #main a
-  @apply text-blue-dark no-underline border-b border-blue border-dotted
+  @apply text-blue-30 no-underline border-b border-blue-10 border-dotted
 
   &:hover,
   &:focus
-    @apply text-blue border-solid
+    @apply text-blue-10 border-solid
 
 #footer a
   @apply text-white no-underline border-b border-dotted border-white
diff --git a/tailwind.config.js b/tailwind.config.js
index 2192963..f3f644b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,23 +6,23 @@ module.exports = {
         '60': 'rgba(0, 0, 0, .6)',
       },
       blue: {
-        default: '#3490dc',
-        dark: '#2779bd',
-        light: '#bcdefa',
+        '10': '#bcdefa',
+        '20': '#3490dc',
+        '30': '#2779bd',
       },
-      'green': {
-        default: '#77B159',
-        dark: '#325E1C',
-        light: '#CDE2C2',
-        lighter: '#F3FAEE',
+      green: {
+        '10': '#F3FAEE',
+        '20': '#CDE2C2',
+        '30': '#77B159',
+        '40': '#325E1C',
       },
-      'grey': {
-        default: '#b8c2cc',
-        dark: '#8795a1',
-        darkest: '#3d4852',
-        light: '#dae1e7',
-        lighter: '#f0f0f0',
-        lightest: '#F6F6F2',
+      grey: {
+        '10': '#F6F6F2',
+        '20': '#f0f0f0',
+        '30': '#dae1e7',
+        '40': '#b8c2cc',
+        '50': '#8795a1',
+        '60': '#3d4852',
       },
       'transparent': 'transparent',
       'white': '#ffffff',