diff --git a/public/index.html b/public/index.html
index 1f3f4fb..a613c5f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Rebuilding Acquia</title>
   </head>
-  <body class="antialiased bg-grey-200 font-sans min-h-full flex flex-col flex-1">
+  <body class="antialiased bg-gray-200 font-sans min-h-full flex flex-col flex-1">
     <noscript>
       <strong>We're sorry but rebuilding-acquia doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
diff --git a/src/App.vue b/src/App.vue
index 98ce5d8..f31b981 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,11 +32,11 @@ h2 {
 }
 
 .btn.is-secondary {
-  @apply bg-grey-500;
+  @apply bg-gray-500;
 
   &:hover,
   &:focus {
-    @apply bg-grey-600
+    @apply bg-gray-600
   }
 }
 
diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
index ec11260..292f025 100644
--- a/src/components/AppBreadcrumb.vue
+++ b/src/components/AppBreadcrumb.vue
@@ -3,7 +3,7 @@
     <ul class="flex -ml-3">
       <li class="flex items-center ml-3">
         <div class="flex flex-col-reverse">
-          <span class="text-grey-700 uppercase text-sm">Organisation</span>
+          <span class="text-gray-700 uppercase text-sm">Organisation</span>
           <span v-if="!selectedOrganisation" class="font-bold block mb-1">All</span>
           <router-link v-else :to="{name: 'applications'}" class="font-bold block mb-1 hover:text-blue-400" v-text="selectedOrganisation"></router-link>
         </div>
@@ -12,7 +12,7 @@
 
       <li class="flex items-center ml-3">
         <div class="flex flex-col-reverse">
-          <span class="text-grey-700 uppercase text-sm">Application</span>
+          <span class="text-gray-700 uppercase text-sm">Application</span>
           <span v-if="!selectedOrganisation" class="font-bold block mb-1">All</span>
           <router-link v-else :to="{name: 'environments'}" class="font-bold block mb-1 hover:text-blue-400" v-text="selectedApplication"></router-link>
         </div>
@@ -21,7 +21,7 @@
 
       <li class="flex items-center ml-3">
         <div class="flex flex-col-reverse">
-          <span class="text-grey-700 uppercase text-sm">Environment</span>
+          <span class="text-gray-700 uppercase text-sm">Environment</span>
           <span class="font-bold block mb-1">{{ selectedEnvironment || '--' }}</span>
         </div>
       </li>
diff --git a/src/components/Application/ApplicationCard.vue b/src/components/Application/ApplicationCard.vue
index ba859f1..f6ca8c0 100644
--- a/src/components/Application/ApplicationCard.vue
+++ b/src/components/Application/ApplicationCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="display == 'grid'" class="bg-white p-4 border-grey-400 rounded-sm border flex-1 shadow">
+    <div v-if="display == 'grid'" class="bg-white p-4 border-gray-400 rounded-sm border flex-1 shadow">
       <div class="flex h-full">
         <div class="flex-1 w-5/6 flex flex-col justify-between">
           <div>
@@ -22,7 +22,7 @@
       </div>
     </div>
 
-    <div v-if="display == 'list'" class="bg-white p-3 border-grey-400 border-b">
+    <div v-if="display == 'list'" class="bg-white p-3 border-gray-400 border-b">
       <div class="-mx-2">
         <div class="flex flex-row-reverse items-center justify-between">
           <div class="flex flex-1 justify-between items-center -mx-2">
diff --git a/src/components/Application/ApplicationDisplaySwitcher.vue b/src/components/Application/ApplicationDisplaySwitcher.vue
index 5e68769..567ff80 100644
--- a/src/components/Application/ApplicationDisplaySwitcher.vue
+++ b/src/components/Application/ApplicationDisplaySwitcher.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <div class="bg-grey-100 rounded overflow-hidden">
-      <button type="button" class="p-2 focus:outline-none focus:bg-blue-300 focus:text-white" :class="[mode == 'grid' ? 'bg-blue-100 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'grid')">
+    <div class="bg-gray-100 rounded overflow-hidden">
+      <button type="button" class="p-2 focus:outline-none focus:bg-blue-300 focus:text-white" :class="[mode == 'grid' ? 'bg-blue-100 text-white' : 'text-gray-700']" @click="$emit('display-changed', 'grid')">
         <svg class="h-5 w-5 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__grid"></use></svg>
         <span class="visuallyhidden">Grid</span>
       </button>
 
-      <button type="button" class="p-2 focus:outline-none focus:bg-blue-300 focus:text-white" :class="[mode == 'list' ? 'bg-blue-100 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'list')">
+      <button type="button" class="p-2 focus:outline-none focus:bg-blue-300 focus:text-white" :class="[mode == 'list' ? 'bg-blue-100 text-white' : 'text-gray-700']" @click="$emit('display-changed', 'list')">
         <svg class="h-5 w-5 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__list"></use></svg>
         <span class="visuallyhidden">List</span>
       </button>
diff --git a/src/components/Application/ApplicationTags.vue b/src/components/Application/ApplicationTags.vue
index 958e1e7..490049b 100644
--- a/src/components/Application/ApplicationTags.vue
+++ b/src/components/Application/ApplicationTags.vue
@@ -18,7 +18,7 @@ export default {
 
 <style scoped>
 .tag {
-  @apply text-2xs py-1 px-2 rounded uppercase border border-grey-400 bg-white mr-2 mb-2
+  @apply text-2xs py-1 px-2 rounded uppercase border border-gray-400 bg-white mr-2 mb-2
 }
 
 .tag[data-type="drupal"] {
diff --git a/src/components/Application/StarToggle.vue b/src/components/Application/StarToggle.vue
index 993e06d..c211304 100644
--- a/src/components/Application/StarToggle.vue
+++ b/src/components/Application/StarToggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange-100 hover:text-orange-200 focus:text-orange-200' : 'text-grey-400 focus:text-orange-200 hover:text-orange-100']">
+  <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange-100 hover:text-orange-200 focus:text-orange-200' : 'text-gray-400 focus:text-orange-200 hover:text-orange-100']">
     <span class="visuallyhidden">{{ !starred ? 'Star' : 'Unstar' }} {{ application.name }}</span>
     <svg class="h-6 w-6 fill-current -mr-1" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#state__${starred ? 'starred' : 'unstarred'}`"></use></svg>
   </button>
diff --git a/src/components/Environment/ActionCard.vue b/src/components/Environment/ActionCard.vue
index 4d09576..0e55e07 100644
--- a/src/components/Environment/ActionCard.vue
+++ b/src/components/Environment/ActionCard.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="border border-grey-400 rounded shadow bg-white overflow-hidden">
+  <div class="border border-gray-400 rounded shadow bg-white overflow-hidden">
     <div class="border-t-4 border-teal">
-      <div class="border-b border-grey-400">
+      <div class="border-b border-gray-400">
         <div class="px-3 py-4">
           <div class="flex flex-row-reverse">
             <div class="flex-1">
-              <h2 class="text-grey-600 text-base mb-1">{{ title }}</h2>
-              <div class="text-xs text-grey-600">{{ description }}</div>
+              <h2 class="text-gray-600 text-base mb-1">{{ title }}</h2>
+              <div class="text-xs text-gray-600">{{ description }}</div>
             </div>
 
             <div class="mr-3">
diff --git a/src/components/Environment/ActionCardButton.vue b/src/components/Environment/ActionCardButton.vue
index 1268749..9d1eb1c 100644
--- a/src/components/Environment/ActionCardButton.vue
+++ b/src/components/Environment/ActionCardButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
+  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-gray-200 focus:bg-gray-200 focus:outline-none block">
     <slot></slot>
     <span class="block" v-text="label"></span>
   </button>
diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index 56d4318..9fedfae 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -47,7 +47,7 @@
             <li class="button-list-item">
               <action-card-button label="Restore" :disabled="isProduction" :class="{
                 'text-blue-300': !isProduction,
-                'text-grey-500 cursor-not-allowed': isProduction
+                'text-gray-500 cursor-not-allowed': isProduction
               }">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__restore"></use></svg>
               </action-card-button>
@@ -110,6 +110,6 @@ export default {
 }
 
 .button-list-item {
-  @apply w-1/2 flex-1 text-center border-l border-grey-400
+  @apply w-1/2 flex-1 text-center border-l border-gray-400
 }
 </style>
diff --git a/src/components/Environment/EnvironmentCards.vue b/src/components/Environment/EnvironmentCards.vue
index c7aa035..f9c86cf 100644
--- a/src/components/Environment/EnvironmentCards.vue
+++ b/src/components/Environment/EnvironmentCards.vue
@@ -2,21 +2,21 @@
   <div class="mb-6">
     <div class="flex flex-wrap -mx-4 -mb-6">
       <div v-for="(environment, key) in environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6" :key="key">
-        <div class="border border-grey-400 rounded overflow-hidden shadow">
+        <div class="border border-gray-400 rounded overflow-hidden shadow">
            <div class="bg-white">
             <div class="border-t-4 border-teal p-3">
-              <router-link :to="{ name: 'environment', params: { environmentName: key, id: id }}" class="flex items-baseline no-underline hover:underline focus:underline text-grey-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none mb-1">
+              <router-link :to="{ name: 'environment', params: { environmentName: key, id: id }}" class="flex items-baseline no-underline hover:underline focus:underline text-gray-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none mb-1">
                 <h2>{{ environment.name }}</h2>
                 <svg class="w-4 h-4 fill-current text-inherit ml-2" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
               </router-link>
 
               <div class="mb-2">
-                <a href="#0" class="no-underline hover:underline focus:underline text-grey-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none">
+                <a href="#0" class="no-underline hover:underline focus:underline text-gray-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none">
                   {{ environment.url }}
                 </a>
               </div>
 
-              <div class="text-grey-600">{{ environment.label }}</div>
+              <div class="text-gray-600">{{ environment.label }}</div>
             </div>
           </div>
 
@@ -24,20 +24,20 @@
             <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               <span class="flex-1">Code</span>
-              <span class="border-l border-grey-400 p-2">
+              <span class="border-l border-gray-400 p-2">
                 <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
               </span>
             </button>
 
-            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1 border-t border-grey-400">
+            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1 border-t border-gray-400">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               <span class="flex-1">Databases</span>
-              <span class="border-l border-grey-400 p-2">
+              <span class="border-l border-gray-400 p-2">
                 <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
               </span>
             </button>
 
-            <button type="button" class="flex items-center text-white bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left py-1 border-t border-grey-400">
+            <button type="button" class="flex items-center text-white bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left py-1 border-t border-gray-400">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               Files
             </button>
diff --git a/src/components/Environment/QuickHelp.vue b/src/components/Environment/QuickHelp.vue
index 208bacb..240582f 100644
--- a/src/components/Environment/QuickHelp.vue
+++ b/src/components/Environment/QuickHelp.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'block lg:flex']">
-    <div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-grey-200">
+    <div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-gray-200">
       <div class="flex items-center">
         <svg class="h-6 w-6 mr-1 text-purple fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
         Quick help
@@ -22,13 +22,13 @@
             :key="item.subject"
             type="button"
             class="hover:underline focus:underline mr-6 focus:outline-none"
-            :class="[ i === selected ? 'text-grey-700' : 'text-blue-300' ]"
+            :class="[ i === selected ? 'text-gray-700' : 'text-blue-300' ]"
             @click="selected = i"
           >{{ item.subject }}</button>
         </div>
 
         <div class="leading-normal">
-          <p class="text-sm text-grey-600">
+          <p class="text-sm text-gray-600">
             {{ items[selected].text }}
             <a href="#0" class="text-blue-300 no-underline hover:underline focus:underline">Learn more</a>
           </p>
diff --git a/src/components/Environment/TaskLog/TaskLog.vue b/src/components/Environment/TaskLog/TaskLog.vue
index 5cfd6dc..577203f 100644
--- a/src/components/Environment/TaskLog/TaskLog.vue
+++ b/src/components/Environment/TaskLog/TaskLog.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bg-grey-300 pb-4 pt-6 px-4">
+    <div class="bg-gray-300 pb-4 pt-6 px-4">
       <h2 class="font-normal text-lg">Task Log</h2>
     </div>
     <div>
diff --git a/src/components/Environment/TaskLog/TaskLogItem.vue b/src/components/Environment/TaskLog/TaskLogItem.vue
index 86e5fd2..20b44ad 100644
--- a/src/components/Environment/TaskLog/TaskLogItem.vue
+++ b/src/components/Environment/TaskLog/TaskLogItem.vue
@@ -1,26 +1,26 @@
 <template>
   <div>
-    <div class="px-3 py-4 border-b border-grey-300 flex" :class="{'bg-yellow-lightest': open}">
+    <div class="px-3 py-4 border-b border-gray-300 flex" :class="{'bg-yellow-lightest': open}">
       <div class="flex-none mr-3">
-        <svg v-if="task.loading" class="h-5 w-5 text-grey-500 fill-current rotates" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
+        <svg v-if="task.loading" class="h-5 w-5 text-gray-500 fill-current rotates" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
         <svg v-if="!task.loading && task.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
         <svg v-if="!task.loading && !task.success" class="h-5 w-5 text-red fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__warning"></use></svg>
       </div>
 
       <div class="flex-1">
         <div class="text-sm font-bold mb-2">{{ task.text }}</div>
-        <div class="text-grey-600 text-2xs">{{ task.times.display }}</div>
+        <div class="text-gray-600 text-2xs">{{ task.times.display }}</div>
       </div>
 
       <div>
         <button type="button" @click="open = !open">
-          <svg v-if="!open" class="h-5 w-5 text-grey-600 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
-          <svg v-else class="h-5 w-5 text-grey-600 fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
+          <svg v-if="!open" class="h-5 w-5 text-gray-600 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
+          <svg v-else class="h-5 w-5 text-gray-600 fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
         </button>
       </div>
     </div>
 
-    <div class="p-4 bg-grey-600 text-white antialiased" v-show="open">
+    <div class="p-4 bg-gray-600 text-white antialiased" v-show="open">
       <div class="lg:flex lg:flex-wrap -mx-4 -mb-4">
         <div class="px-4 mb-4">
           <div class="text-xs uppercase mb-1">Task ID</div>
diff --git a/src/components/HeaderButtons.vue b/src/components/HeaderButtons.vue
index 78473df..5fa76cb 100644
--- a/src/components/HeaderButtons.vue
+++ b/src/components/HeaderButtons.vue
@@ -6,7 +6,7 @@
           type="button"
           class="text-xs no-underline hover:underline flex flex-col items-center justify-center"
           :class="{
-            'text-grey cursor-not-allowed': link.disabled,
+            'text-gray-400 cursor-not-allowed': link.disabled,
             'text-blue-300': !link.disabled,
           }"
           :disabled="link.disabled"
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 3f05695..69b1af2 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-auto lg:w-56 bg-grey-300 text-grey-400 antialiased fixed left-0 h-full overflow-y-scroll z-30">
+  <div class="w-auto lg:w-56 bg-gray-300 text-gray-400 antialiased fixed left-0 h-full overflow-y-scroll z-30">
     <div>
       <ul class="list-reset">
         <li v-for="link in links" :key="link.title">
@@ -7,10 +7,10 @@
             href="#0"
             class="flex items-center no-underline focus:underline px-4 py-2 text-sm"
             :class="{
-              'bg-grey-600 text-white hover:text-white': link.active,
-              'border-transparent hover:bg-grey-400': !link.active,
-              'text-grey-500 cursor-not-allowed': link.disabled,
-              'text-grey-600 hover:text-blue-300': !link.disabled && !link.active,
+              'bg-gray-600 text-white hover:text-white': link.active,
+              'border-transparent hover:bg-gray-400': !link.active,
+              'text-gray-500 cursor-not-allowed': link.disabled,
+              'text-gray-600 hover:text-blue-300': !link.disabled && !link.active,
             }"
           >
             <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>
diff --git a/src/components/TitleBlock.vue b/src/components/TitleBlock.vue
index f325479..1b9999c 100644
--- a/src/components/TitleBlock.vue
+++ b/src/components/TitleBlock.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="border-b-3 border-grey-300">
-    <div class="bg-white px-4 lg:px-6 py-5 border-t border-grey-200 flex justify-between items-center">
+  <div class="border-b-3 border-gray-300">
+    <div class="bg-white px-4 lg:px-6 py-5 border-t border-gray-200 flex justify-between items-center">
       <div class="w-full md:w-auto flex flex-col">
         <app-breadcrumb :application="application" :environment="environment"></app-breadcrumb>
       </div>
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index a075fc1..227f6b9 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -27,7 +27,7 @@
                 <div class="w-full">
                   <form action="#">
                     <label for="applications" class="visuallyhidden">Filter applications</label>
-                    <input id="applications" type="text" placeholder="Filter applications" class="w-full py-2 px-3 border border-grey-400-6 rounded">
+                    <input id="applications" type="text" placeholder="Filter applications" class="w-full py-2 px-3 border border-gray-600 rounded">
                   </form>
                 </div>
               </div>
diff --git a/src/views/Environment.vue b/src/views/Environment.vue
index 2793792..b2548bc 100644
--- a/src/views/Environment.vue
+++ b/src/views/Environment.vue
@@ -39,14 +39,14 @@
               </div>
 
               <div class="shadow-md overflow-hidden">
-                <div class="bg-white border-b-2 border-grey-300 p-3"><h2 class="text-lg">Site Health</h2></div>
+                <div class="bg-white border-b-2 border-gray-300 p-3"><h2 class="text-lg">Site Health</h2></div>
                 <div class="bg-white p-4">
                   <div class="mb-6">
-                    <p class="text-lg font-hairline text-grey-darkest">Uptime monitoring</p>
+                    <p class="text-lg font-hairline text-gray-700">Uptime monitoring</p>
                   </div>
 
                   <div class="text-center leading-normal mb-5">
-                    <p class="text-grey-600">
+                    <p class="text-gray-600">
                       Acquia uses a specially tuned uptime monitoring solution to keep track<br class="hidden md:inline">
                       of whether your Drupal site is really up and running.
                     </p>
@@ -60,11 +60,11 @@
               </div>
 
               <div class="shadow-md overflow-hidden">
-                <div class="bg-white border-b-2 border-grey-300 p-3"><h2 class="text-lg">Information</h2></div>
+                <div class="bg-white border-b-2 border-gray-300 p-3"><h2 class="text-lg">Information</h2></div>
                 <div class="bg-white px-4 py-6">
                   <div class="mb-6 relative">
                     <div class="text-xs mb-1">Git URL</div>
-                    <div class="border border-grey-dark rounded p-3 truncate">{{ gitUrl }}</div>
+                    <div class="border border-gray-500 rounded p-3 truncate">{{ gitUrl }}</div>
                     <div class="absolute top-0 right-0">
                       <button type="button" class="flex items-center text-xs text-blue-300 hover:underline focus:underline">
                         <svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
@@ -75,7 +75,7 @@
 
                   <div class="mb-6 relative">
                     <div class="text-xs mb-1">SSH URL</div>
-                    <div class="border border-grey-dark rounded p-3 truncate">{{ sshUrl }}</div>
+                    <div class="border border-gray-500 rounded p-3 truncate">{{ sshUrl }}</div>
                     <div class="absolute top-0 right-0">
                       <button type="button" class="flex items-center text-xs text-blue-300 hover:underline focus:underline">
                         <svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
@@ -86,22 +86,22 @@
 
                   <div class="flex flex-wrap -mx-4 -mb-4 lg:-mb-6">
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-600">IP Address</div>
+                      <div class="mb-1 text-xs text-gray-600">IP Address</div>
                       <div>1.2.3.4</div>
                     </div>
 
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-600">Region</div>
+                      <div class="mb-1 text-xs text-gray-600">Region</div>
                       <div>eu-west-1</div>
                     </div>
 
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-600">PHP version</div>
+                      <div class="mb-1 text-xs text-gray-600">PHP version</div>
                       <div>7.1</div>
                     </div>
 
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-600">Live development mode</div>
+                      <div class="mb-1 text-xs text-gray-600">Live development mode</div>
                       <div>Off</div>
                     </div>
                   </div>
diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index 3418ce8..e4072bd 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -37,7 +37,7 @@
               <div class="lg:flex lg:flex-row-reverse flex-1 justify-between _bg-blue items-baseline">
                 <div class="w-full lg:w-1/2 xl:w-1/3">
                   <form action="#">
-                    <input type="text" placeholder="Filter environments" class="w-full py-2 px-3 border border-grey-400-6 rounded">
+                    <input type="text" placeholder="Filter environments" class="w-full py-2 px-3 border border-gray-600 rounded">
                   </form>
                 </div>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index dfe4e9e..554e2a7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,14 +12,14 @@ module.exports = {
         400: '#004f86'
       },
       green: '#398002',
-      grey: {
-        100: '#f8fafc',
-        200: '#eee',
-        300: '#ddd',
-        400: '#bbb',
-        500: '#888',
-        600: '#555',
-        700: '#333'
+      gray: {
+        100: '#f8fafc', // lightest
+        200: '#eee', // lighter
+        300: '#ddd', // light
+        400: '#bbb', // default
+        500: '#888', // dark
+        600: '#555', // darker
+        700: '#333' // darkest
       },
       orange: {
         100: '#fa9903',
